Question

当图像悬停时，我想在div显示内部有一个边框，但是它显示div背面的边框。我尝试使用z-index，但也没有用。这是我的代码https://jsfiddle.net/ormxn1dn/2/

.thumb_images{
float:left;
width: 90px;
height: 60px;
background-color:#CCC;
text-align:center;
margin-right: 5px;
}

.thumb_images:hover{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
    <div id="thumb0" class="thumb_images">
        <img src="http://img.yapo.cl/thumbs/70/7034297379.jpg">
    </div>
    <div id="thumb1" class="thumb_images">
        <img src="http://img.yapo.cl/thumbs/70/7015566906.jpg">
    </div>      
    <div id="thumb2" class="thumb_images">
        <img src="http://img.yapo.cl/thumbs/70/7058183501.jpg">
    </div>

Answer 1

为什么要将图像包装在div中？你为什么用盒子阴影来制作边框？

您可以直接将样式应用于图像本身。然后，您可以在悬停时添加边框。

如果你需要我，我可以为你写。我只是需要更多关于你想要实现的信息？

Answer 2

你可以做......

https://jsfiddle.net/hs5g1osv/1/

{{1}}

将内阴影边框设置为div内图像的顶部

2 个答案: