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

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时，其总宽度增加2像素（每侧边框1像素）

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

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

现在，当添加红色边框时，它不会添加任何宽度，因为该宽度已经以透明边框的形式存在。 该解决方案非常适合想要在不加覆盖的情况下保留原始内容的同时添加突出显示的情况。

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

.divborderhighlight {
   outline: 1px solid red;
}

这与border属性一样，但作为覆盖层，不增加元素的宽度或高度。 不利的一面是它沿元素的周边隐藏了1px。

Answer 2

使用轮廓线代替边​​框：

.divborderhighlight {
   outline:1px solid red;
}

大纲文件

轮廓不会占用空间。

http://jsfiddle.net/XCtQB/

Answer 3

使用CSS来指定悬停行为：

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

然后使用轮廓线代替边​​框：

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

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

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

运行演示

Answer 4

添加透明边框：

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