javascript - 鼠标悬停时如何避免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;
}

现在添加红色边框时，它不会添加任何宽度，因为宽度已经以透明边框的形式存在。此解决方案非常适合您想要添加亮点同时保留原始内容而没有任何覆盖的情况。

另一种解决方案是在鼠标悬停时使用大纲属性而不是边框​​：

.divborderhighlight {
   outline: 1px solid red;
}

这就像边界属性一样工作，但作为一个覆盖层，不会向元素添加宽度或高度。这样做的缺点是它沿元素的周边隐藏了 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状态中对其进行固化/着色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;
}