如何更改用戶懸停在HREF內的DIV的背景顏色？

我有一個包含幾個菜單項的菜單欄。如何更改用戶懸停在HREF內的DIV的背景顏色？

menubar with menu items

菜單欄是包含菜單項（其也是的div）一個DIV和每個菜單項的內部我有一個HREF。

下面是HTML：

<style> 
.menubar-style { 
    width: 100%; 
    background-color: white; 
    height: 20px; 
    text-align:center; 
} 
.menuitem-style { 
    float: left; 
    width: 10%; 
    border-right: thin; 
    border-right-style:solid; 
} 
</style> 
... 
... 
<div class="menubar-style"> 
    <div class="menuitem-style"><a href="#">Link 1</a></div> 
    <div class="menuitem-style"><a href="#">Link 2</a></div> 
    <div class="menuitem-style"><a href="#">Link 3</a></div> 
</div>

我想要做的是更改菜單項的背景顏色（DIV，不只是HREF）當光標位於頂部鏈接。

如何從鏈接中捕獲mouseover事件並使用該事件繪製整個菜單項的背景顏色？

更好的是，有沒有辦法檢查鼠標是否覆蓋整個菜單項（不僅僅是鏈接）？這將是一個更好的選擇，因爲菜單項會通過鼠標框上的鼠標改變顏色，而不僅僅是鏈接。

感謝先進！

月

來源

2012-11-10 Jan Tacci

可以:hover選擇簡單地添加到任何預定義的樣式只適用它當鼠標懸停在該特定對象

.menuitem-style:hover { 
    background-color: red; // only changes to red if the mouse is hovering. 
}

來源

2012-11-10 07:28:03 Ahmad

酷！然而，我注意到，你正在改變邊界的右邊而不是背景的顏色？或者這是實際發生的事情？我想我可以試試看看。 :) –

@JanTacci看到我的編輯。 – Ahmad

是的，無視我上面的評論。我只需要將_background-color_添加到懸停。 –

你將不得不使用一些JavaScript或jQuery的做這個。不過，只要將鼠標移到div上就可以更改div的顏色。

在<head>補充一點：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

你應該一類添加到您的<a>標籤，我們稱之爲類menu-link。所以，而不是<a href="#">Link 1</a>你將有<a href="#" class="menu-link">Link 1</a>。現在

，您可以在以下jQuery代碼添加到您的<head>：

<script> 
    $('a.menu-link').hover(function() 
    { 
     $(this).parent().css('background-color', 'red'); 
    }, function() 
    { 
     $(this).parent().css('background-color', 'white'); 
    } 
</script>

這個jQuery代碼將改變<a>標籤，在這種情況下是你<div>標籤的父的背景顏色。

來源

2012-11-10 07:35:07

只處理懸停事件的jQuery？ – techfoobar

他想在裏面懸停標籤時更改div。當然，在徘徊在div上時更換div可能更容易/更好，但這不是問題。 –

您的解決方案是正確的，並對問題。我的意思是，包括jQuery對於這樣一個小的需求是一個矯枉過正的事情。 – techfoobar

如何更改用戶懸停在HREF內的DIV的背景顏色？

回答

相關問題