Question

我无法使其正常工作。当用户使用鼠标时，如何在不调整图像大小的情况下进行此操作？

HTML：

<div id="highlight" class="outerbox">   
    <div id="boxTitle">
        Highlight
    </div>
<img src="http://lookouch.com/www/assets/newImages/home/modulos/1.jpg"/>
</div>

CSS：

#boxTitle { 
    color: #ffffff; 
    background-color: #6000ff; 
    padding: 5px 5px 5px 5px; 
    position: absolute; 
    font-family: Montserrat; 
    font-size: 13px; 
    display: inline-block; 
    top: 0; 
    left: 0; 
}

#highlight { width: 100%; display: inline-block; position: relative; }
#highlight img { width: 100%; height: 100%; }

#highlight:hover { 
    border: 2px solid #6000ff; 
    box-sizing: border-box; 
    overflow: hidden; 
}

Answer 1

三件事：

将高亮显示div设为透明边框：border: 2px solid transparent;。这将阻止跳跃。
将vertical-align:top;添加到#highlight img以消除图片下的空白。
从box-sizing: border-box;移除#highlight:hover。这里不需要它。

<强> jsFiddle example

Answer 2

在悬停时应用边框会减小div的内部大小，从而导致width: 100%; height: 100%图像缩小。

在div悬停之前给div一个透明的边框，这样它就不会有任何内部尺寸变化：

#highlight {
    border: 2px solid transparent;
    box-sizing: border-box;
    width: 100%;
    display: inline-block;
    position: relative;
}

http://jsfiddle.net/P9zaZ/2/

Answer 3

您可以使用outline代替border：jsfiddle

但是有一个缺点：border-radius不会像outline一样影响border。

图像大小调整：悬停

3 个答案: