Question

我正在尝试在悬停时向父级添加内部边框，使图像保持不变并被裁剪为与父级边框相同的像素。

有什么想法吗？

HTML

<ul class="videoList">
            <li>
                <a href="#"><img src="http://www.flir.com/uploadedImages/Thermography_USA/Industries/ATS/Images/160x120-Uncooled-bolometer-E40-motorcycle.jpg" /></a>
            </li>
            <li>
                <a href="#"><img src="http://www.flir.com/uploadedImages/Thermography_USA/Industries/ATS/Images/160x120-Uncooled-bolometer-E40-motorcycle.jpg" /></a>
            </li>
</ul>

CSS

.videoList {padding:0;}
.videoList li {box-sizing:border-box;float:left;padding:0;display:block;}
.videoList li img {display: block;}
.videoList li:hover {border:solid 5px #eb6c34;}

小提琴：

http://jsfiddle.net/6Lon213n/1/

P.S。必须支持IE9 +。

Answer 1

您可以使用伪元素：

.videoList li:hover:after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    box-sizing: border-box;
    border:solid 5px #eb6c34;
}

<强> DEMO

请注意，如果您的图片是链接，则需要在<a>元素上设置伪元素以启用cliking：

<强> DEMO

悬停边框和裁剪元素内的图像

1 个答案: