Как изменить цвет фона при наведении курсора с помощью jQuery

Question

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

Я просто пытаюсь изменить фоновый цвет элемента меню с именем класса «active», когда пользователь наводится на любой другой элемент.

Answer 1

Просто попробуйте это:

$(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

Answer 2

Проблема UL не родитель <a>. Используйте parents() или closest(). Материнской является LI

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

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

Answer 3

вот способ сделать это с .hover()

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

я добавил код для обработки hoverOut, а также, так как я предполагаю, что вы только хотели показать красный фон, когда пользователь перешел по ссылке. редактируйте демо по своему усмотрению.

Answer 4

Поскольку вы уже просматриваете эту функцию в #nav div, вы можете упростить все, просматривая поиск активного тега привязки в этом контейнере.

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

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

Это позволит установить цвет фона, когда вы наведите курсор мыши на любом из пунктов меню, но когда мышь покидает пункты меню (больше не нависает) фон останется красным. Я бы рекомендовал переключить имя класса в активном теге привязки внутри функции обработчика зависания.

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

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

Answer 5

Моя идея заключается в том, чтобы добавить класс 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