我几乎不敢问这个问题,因为它似乎是一个显而易见的问题,但我找不到一个明确的答案,所以冒着玷污我不存在的声誉的风险,这里有:
有没有办法在悬停时向图像添加扩展的CSS内边框,而不影响图像的大小？
这是我的代码尽可能接近我自己:
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.media_item_container img {
border: 3px solid #00205f;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.media_item_container img:hover {
border: 10px solid #00205f;
}
.media_item_container a
{
font-weight:bold;
color:#000;
text-decoration:none;
font-size:13px;
}
.media_item_container a:hover
{
color:#fff;
}
HTML
<body bgcolor="#999999">
<div class="media_item_container">
<div class="media_item_text">
<a href="#"><img src="http://lorempixel.com/output/business-q-c-158-158-5.jpg" width="158" height="158" class="media_item_thumb" />
<h3>E-Brochure: <em>Printable …