鼠标悬停时如何避免div'移动'？

Question

我喜欢在鼠标悬停时突出显示每个框，我能够显示效果，但事情就是当我将鼠标悬停时，框似乎向右移动/扩展。那么我该如何避免这种情况呢？

我如何避免这种情况？

HTML

    <div id="divtargetDay_1__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_2__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_3__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_4__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_5__Assigned" class=" divday divfloatpointerleft"></div>
    <div id="divtargetDay_6__Assigned" class=" divday divfloatpointerleft"></div>

CSS

.divborderhighlight {
   border:1px solid red;
}

.divfloatpointerleft {
    cursor:pointer;
    float:left;
}

.divday {
    width: 56px !important;    
    height: 56px !important; 
    margin-right:4px;   
}

JS

function dayHover(index) {
        labels[index].hover(function () {
            $(this).addClass('divborderhighlight');
        }, function () {
            $(this).removeClass('divborderhighlight');
        });
    }

Answer 1

问题在于：

.divborderhighlight {
   border: 1px solid red;
}

如果将其添加到没有边框的div中，则会将其总宽度增加2px（每边的边框为1px）

有一些解决方案。一种是为每个非高亮显示的div添加透明边框，如下所示：

.divfloatpointerleft {
    cursor: pointer;
    float: left;
    border: 1px solid transparent;
}

现在添加红色边框时，它不会添加任何宽度，因为宽度已经以透明边框的形式存在。此解决方案非常适合在您想要添加突出显示的同时保留原始内容而不进行任何叠加时。

另一个解决方案是在鼠标悬停时使用outline属性而不是border：

.divborderhighlight {
   outline: 1px solid red;
}

这就像border属性一样，但作为叠加层，不会为元素添加任何宽度或高度。这样做的缺点是它会沿着元素的周边隐藏1px。

Answer 2

使用outline而不是border：

.divborderhighlight {
   outline:1px solid red;
}

outline doc

  

大纲不占用空间。

http://jsfiddle.net/XCtQB/

Answer 3

使用CSS指定悬停行为：

divday:hover  {
   border:1px solid red;
}

然后使用outline而不是border：

.divday:hover  {
   outline:1px solid red;
}

另一种解决方案是在default状态下使用透明边框，在hover状态下对其进行固化/着色。

.divday  {
   border:1px solid transparent;
}
.divday:hover  {
   border:1px solid red;
}

Running Demo

Answer 4

添加透明边框：

.divday {
    width: 56px !important;    
    height: 56px !important; 
    margin-right:4px;   
    border: 1px solid transparent;
}