邊框懸停和裁剪元素內的圖像

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/

附：必須支持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