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

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;}

fiddle :

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

附言必须支持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>上设置伪元素启用点击的元素:

DEMO