問題描述

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

問題解答

給你寫了一個(gè)簡(jiǎn)單的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：

編程最重要的是思想，代碼自己實(shí)現(xiàn)。基本思路就是使用position來(lái)解決這個(gè)問題。

加個(gè)鼠標(biāo)移入移除事件，img上放個(gè)p移除時(shí)透明，

用display就可以實(shí)現(xiàn)啊。。移入移出設(shè)置下就好了啊