javascript - 怎么在DIV图片上加个DIV,并带有按钮链接呢?
本文介绍了javascript - 怎么在DIV图片上加个DIV,并带有按钮链接呢?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
怎么在DIV图片上加个DIV,并带有按钮链接呢?如同所示,哪位大神给个完整代码谢谢!
解决方案
给你写了一个简单的hover效果
http://jsrun.net/TQYKp
html
<div class='box'>
<div class='image'>
<img src='http://imgsrc.baidu.com/imgad/pic/item/730e0cf3d7ca7bcbd0a1ac09b4096b63f624a83a.jpg'
width='100%'>
</div>
<div class='mask'>
<a class='link' href='#'>
查看更多
</a>
</div>
</div>
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
}
这篇关于javascript - 怎么在DIV图片上加个DIV,并带有按钮链接呢?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文