我又来问问题了还是html5的 我想在图片上有一个div鼠标经过就出来
我又来问问题了还是html5的我想在图片上有一个div鼠标经过就出来......看图吧还是我试过很多老是图片错位弄的乱七八糟，我已经熬了一晚上，大神求解救...
我又来问问题了还是html5的 我想在图片上有一个div鼠标经过就出来......看图吧还是 我试过很多 老是图片错位弄的乱七八糟，我已经熬了一晚上，大神求解救
展开
展开全部
<style>
*{ padding:0;margin:0;font-size:14px; }
.pa{ position:relative;width:148px;height:148px;border:1px solid #ccc;float:left;margin:10px 0 10px 10px; }
.pa img{ width:100%; }
.hide-div{ position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.35);left:0;top:0;display:none; }
.pa:hover .hide-div{ display:block; }
.hide-div a{ display:block;width:50%;height:24px;line-height:24px;text-align:center;background-color:#1D82FE;color:#FFF;text-decoration:none;position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;border-radius:12px; }
</style>
</head>
<body>
<div class="pa">
<img src="https://img.alicdn.com/imgextra/i2/2344162546/TB2DpUNqYBmpuFjSZFuXXaG_XXa_!!2344162546.jpg"/>
<div class="hide-div">
<a href="#">预览</a>
</div>
</div>
<div class="pa">
<img src="https://img.alicdn.com/imgextra/i4/2344162546/TB2Q4MlqtFopuFjSZFHXXbSlXXa_!!2344162546.jpg"/>
<div class="hide-div">
<a href="#">预览</a>
</div>
</div>
</body>
更多追问追答
追问
大佬
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style>
.box{Position:relative;width:100px;height:100px}
.box img{width:100%;height:100px;}
.box .box2{display:none;}
.box:hover .box2{display:block;position:absolute;left:0;top:0;width:100px;height:100px;}
</style>
<div class="box"><img src="photo.jpg"><div class="box2">这里是鼠标经过显示的DIV这里可以通过CSS3的一些新属性做成动态的等</div>
</div>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
只要把 定位做好，应该就不会有什么问题了
追问
不......不会
追答
这就是一个动画效果的问题
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
