如何使用jQuery更改懸停時的背景顏色

<div> 
    <div id="nav"> 
    <ul> 
     <li><a class="active" href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    </div> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#nav li a").hover( 
     function() { $(this).parent('ul').parent('li').find('a.active').css('background-color', 'Red'); } 
    ); 
    }); 
    </script> 
</div>

我只是試圖在用戶將鼠標懸停在任何其他項目上時更改菜單項的背景顏色，使用類名「活動」。如何使用jQuery更改懸停時的背景顏色

來源

2012-06-17 Jay

就試試這個：

$(this) 
     .parent() // jump to li 
     .parent() // jump to ul 
     .find('li a.active') // find a.active 
     .css('background-color', 'Red'); // apply css

但我認爲你可以簡單地做：

$(document).ready(function() { 
    $("#nav li a").hover(function() { 
     $('li a.active').css('background-color', 'Red'); 
    }, function() { 
     // if you want to remove background 
     // on mouse out then uncomment below line 
     //$('li a.active').css('background-color', 'transparent'); 
    }) 
});

DEMO

來源

2012-06-17 03:45:00 thecodeparadox

''標籤沒有兄弟姐妹是''在OP標記 – charlietfl

標籤，這是非常接近了什麼我正在嘗試去做，除非我不想改變我徘徊的項目的背景，但是該項目具有「活動」類。因此，如果我將鼠標懸停在「聯繫人」上，家庭將獲得紅色背景。 – Jay

@Jay請檢查更新演示 – thecodeparadox

問題是UL不是<a>父。使用parents()或closest()。眼前的父母是LI

http://api.jquery.com/parents/

http://api.jquery.com/closest/

來源

2012-06-17 03:46:37 charlietfl

帶蓋的'紅'可能是問題。此外，在懸停完成後，沒有提到你想要做什麼。隨着你的代碼現在，它永遠不會變回來。使用類更改是最常見的方法，它更容易重置。 codeparadox已經編輯了他的版本約15次，他會找到一個解決方案 – charlietfl

這裏的方式與.hover做到這一點（）

http://jsfiddle.net/nickadeemus2002/ePDZH/

我添加的代碼來處理hoverOut爲好，因爲我假設你只想在用戶通過鏈接時顯示紅色背景。以任何你想要的方式編輯演示。

來源

2012-06-17 03:49:53 chrisvillanueva

由於您已將此功能作用於#nav div，因此可以通過將.active錨定標記搜索到該容器的範圍來簡化所有操作。

// cache the jquery object 
var $navDiv = $("#nav"); 

$("#nav li a").hover(function() { 
    $navDiv.find("a.active").css("background-color", "red"); 
});

這將設置背景顏色，一旦你將鼠標懸停在任何菜單項，但是當你的鼠標離開菜單項（不再徘徊）背景將保持紅色。我建議在懸停處理程序函數內部的.active錨定標記上切換類名稱。

//cache the jquery object 
var $navDiv = $("#navDiv"); 

$("#nav li a").hover(function(){ 
    $navDiv.find("a.active").toggleClass("redBackground"); 
});

來源

2012-06-17 04:13:15 awbergs

我的想法是一類over添加到#nav盤旋而孩子a元素，然後用CSS樣式相應。

的JavaScript：（需要的jQuery）

(function($){ 

    $nav = $("#nav"); 
    $nav.on("mouseenter", "a", function(){ 
    $nav.toggleClass("over"); 
    }).on("mouseleave", "a", function(){ 
    $nav.toggleClass("over"); 
    }); 

})(jQuery);

演示：jsfiddle.net/Marcel/m8jQv/1

來源

2012-06-17 04:37:49 Marcel

如何使用jQuery更改懸停時的背景顏色

回答

相關問題