Div不能正確顯示懸停功能

兩個中的第一個將有一個單詞用作菜單項，第二個將保存背景色。

我創建了背景的懸停樣式，當菜單項被隱藏起來時，會改變該div的不透明度。

我的問題是懸停只有當鼠標正確的div的邊緣啓用。只要我的鼠標移動到div的內部，它就會恢復到原來的不透明狀態。

我的風格：

.menuItemBG { 
    width:100%; 
    text-align: center; 
    background-color:#4281b6; 
    height:100%; 

    /* These three lines are for transparency in all browsers. */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; 
    filter: alpha(opacity=10); 
    opacity:.1; 
    position: absolute; 
} 
.menuItemBG:hover { 
    width:100%; 
    text-align: center; 
    background-color:#4281b6; 
    height:100%; 

    /* These three lines are for transparency in all browsers. */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 
    filter: alpha(opacity=20); 
    opacity:.2; 
    position: absolute; 
} 
.menuItemTitle{ 
    position:relative; 
    color:#000; 
    line-height: 27px; 
    font-size: 14px; 
    margin-left: 20px; 
}

HTLML：

<div style="position:relative; width:208px; height:30px;"> 
    <div class="menuItemBG"></div> 
    <div class="menuItemTitle">Test Item</div> 
</div>

似乎無法找出我的錯誤。

來源

2013-08-27 Milksnake12

當您將鼠標懸停在menuItemTitle上時，您不再徘徊在menuItemBG之上，因爲它們是DOM中的兄弟。您可以將:hover切換到包含它們的div，然後以這種方式將樣式應用到menuItemBG。如果你給包含div類menuItem，你可以這樣做：

.menuItem:hover .menuItemBG { 
    /* These three lines are for transparency in all browsers. */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; 
    filter: alpha(opacity=20); 
    opacity:.2; 
}

注意我沒有重複規律適用於.menuItemBG的CSS。這不是必需的。所以，那麼類menuItem添加到您的包含分區：

<div class="menuItem"> 
    <div class="menuItemBG"></div> 
    <div class="menuItemTitle">Test Item</div> 
</div>

您可以將內聯CSS，你不得不爲.menuItem到您的樣式很容易了。它可以以任何方式工作，但將其移至樣式表更清晰且更易於維護。

.menuItem { 
    position: relative; 
    width: 208px; 
    height: 30px; 
}

演示：http://jsfiddle.net/fYQfX/1

來源

2013-08-27 22:55:34 Michal

+1這比我的回答更優雅。 – AlienWebguy

工作完美，謝謝！ – Milksnake12

我做了一些適用於文體建議的修改。乾杯! – Michal

Div不能正確顯示懸停功能

回答

相關問題