HTML代码
1 2 3 4 5 6 7 8 9 10 11
| <div class='box'> <div class='image'> <img src='https://photo.tuchong.com/316540/f/6406791.jpg' width='100%'> </div> <div class='mask'> <a class='link' href='https://blog.csdn.net/Hreticent/article/details/85109668'> 查看更多 </a> </div> </div>
|
CSS代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| .mask { background-color:rgb(255, 0, 116); 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 }
|
PS.
来源:鼠标移入div显示查看更多demo_Hey-CSDN博客