javascript - 怎麼在DIV圖片上加個DIV,並帶有按鈕連結呢?
代言
代言 2017-07-05 10:38:37
0
4
880

怎麼在p圖片上加個p,並帶有按鈕連結呢?如同所示,哪位大神給個完整代碼謝謝!

#
代言
代言

全部回覆(4)
滿天的星座

寫了一個簡單的hover效果
http://jsrun.net/TQYKp

html

<p class='box'>
  <p class='image'>
    <img src='http://imgsrc.baidu.com/imgad/pic/item/730e0cf3d7ca7bcbd0a1ac09b4096b63f624a83a.jpg'
    width='100%'>
  </p>
  <p class='mask'>
    <a class='link' href='#'>
      查看更多
    </a>
  </p>
</p>

css

.mask {
  background: #ff00a5;
  width: 300px;
  height: 200px;
  position: absolute;
  top: 0;
  z-index: 99;
  display: none
}

.image {
  width: 300px;
  height: 200px;
}

.box {
  position: relative;
  width: 300px;
}

.box:hover .mask {
  display: block;
}

.box:hover .link {
  width: 120px;
  height: 40px;
  display: block;
  background: #FFF;
  line-height: 40px;
  text-align: center;
  margin: 80px auto;
  color: #ff00a5
}
Ty80

程式設計最重要的是思想,程式碼自己實現。
基本思路就是使用position來解決這個問題。

Peter_Zhu

加個滑鼠移入移除事件,img上放個p移除時透明,

女神的闺蜜爱上我

用display就可以實現啊。 。移入移出設定下就好了啊

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板