3

我几乎不敢问这个问题，因为这似乎是一个显而易见的问题，但我找不到明确的答案，所以冒着玷污我不存在的声誉的风险，这里是：

有没有办法在悬停时向图像添加扩展的 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 e-brochure</em></h3>
    DOWNLOAD »</a>
    </div>
</div>
</body>

http://jsfiddle.net/aKedV/

只是想确定是否有任何方法可以做到这一点，而不会随着边框尺寸的增加而缩小图像（我基本上明白为什么会发生这种情况，只是我自己似乎无法提出解决方案）。

当我问是否有办法做到这一点时，我应该澄清一下，我认为一定有办法做到这一点，但我很想知道是否有相对简单的方法。

非常感谢！

4

2 回答 2

5

您可以使用轮廓代替边框。

outline:3px solid red;
outline-offset:-3px; //keeping it inside

在悬停时

outline:10px solid red;
outline-offset:-10px;

小提琴

于 2013-10-11T23:35:54.113 回答
3

伙计，这是我想出的解决方案。不得不更改一些 HTML 和 CSS，但这是我的尝试。希望这有助于交配，干杯

http://jsfiddle.net/aKedV/3/

HTML：

<body bgcolor="#999999">
    <div class="media_item_container">
        <div class="media_item_text">
            <a href="#">
                <div class="border"  style="background: url(http://lorempixel.com/output/business-q-c-158-158-5.jpg);">
                </div>


<h3>E-Brochure: <em>Printable e-brochure</em></h3>
    DOWNLOAD »</a>

    </div>
</div>

CSS：

.border {
    -webkit-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -ms-transition: all 500ms linear;
    -kthtml-transition: all 500ms linear;
    transition: all 500ms linear;
    width: 158px;
    height: 158px;
}
.border:hover {
    -webkit-box-shadow: inset 0px 0px 2px 10px #00205f;
   box-shadow: inset 0px 0px 2px 10px #00205f;
}
.media_item_container a
{
    font-weight:bold;
    color:#000;
    text-decoration:none;
    font-size:13px;
}
.media_item_container a:hover
{
    color:#fff;
}
于 2013-10-11T19:47:39.613 回答