如何在鼠標懸停時避免div「移動」？

我喜歡突出顯示每個框，當鼠標懸停，我能夠顯示效果，但事情是當我徘徊它框看起來像移動/擴大一點到右邊。那麼我如何避免這種情況呢？ enter image description here 如何在鼠標懸停時避免div「移動」？

我該如何避免這種情況？

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; 
}

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

來源

2013-09-23 tsohtan

使用'outline'取代'border' –

您也可以調整高度和寬度上divborderhighlight（54/54），但將需要放棄！重要的divday屬性。 –

@帕特里克埃文斯謝謝！ – tsohtan

使用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; 
}

來源

2013-09-23 08:05:29

添加透明邊框：

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

來源

2013-09-23 07:55:06

問題是這樣的：

.divborderhighlight { 
    border: 1px solid red; 
}

當將它添加到一個div沒有邊框時，它通過2px的增加其總寬度（1像素爲邊界在每一側上）

有幾個解決方案。一種是透明的邊框添加到每個非強調DIV像這樣：

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

現在，當添加了紅色的邊框，它不添加任何寬度，因爲寬度已經在那裏的形式透明邊框。此解決方案非常適合在想要添加高亮區的同時保留原始內容而無需重疊。

另一種解決方案是使用輪廓屬性，而不是邊界上鼠標懸停：

.divborderhighlight { 
    outline: 1px solid red; 
}

這個作品就像border屬性，但爲不增加寬度或高度的元素的疊加。缺點是它沿着元素的周邊隱藏1px。

來源

2013-09-23 07:55:39 chrishasbrouck

沒有注意到在編寫我的代碼之前已經有了「完整」的答案：/ +1 –

使用大綱，而不是邊界：

.divborderhighlight { 
    outline:1px solid red; 
}

outline doc

大綱不佔用空間。

http://jsfiddle.net/XCtQB/

來源

2013-09-23 07:57:16

如何在鼠標懸停時避免div「移動」？

回答

相關問題