問題描述

怎么在p圖片上加個p,并帶有按鈕鏈接呢？如同所示，哪位大神給個完整代碼謝謝！

問題解答

給你寫了一個簡單的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}回答2：

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

加個鼠標移入移除事件，img上放個p移除時透明，

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