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

我试图在悬停时向父级添加一个内部边框，以使图像保持原状并被裁剪为与父级边框相同的像素。

有任何想法吗？

的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/

附言必须支持IE9 +。

最佳答案

您可以使用伪元素：

.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