При наведении указателя мыши на родителя li сделать цвет li li белым и наоборот

Question

Сначала позвольте мне описать проблему, с которой я сталкиваюсь. Пожалуйста, посетите http://dev.eduantech.com/about-me, чтобы узнать, о чем я говорю. Должна быть страницей, не может быть домашней страницей, чтобы вы могли видеть, о чем я говорю.

ОК, поэтому, пожалуйста, наведите курсор на меню, по крайней мере, тот, который имеет в нем подменю. Вы заметите, что когда вы наведите указатель мыши на родителя li, ребенок li станет «невидимым», так как это тот же цвет, что и фон. И наоборот, если вы наведете над дочерним элементом.

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

У меня есть следующий Сорт псевдокод разработан:

$('li.menu-parent-current > li.menu-child-current a').hover(
    function() { 
     $(this).css('color', '#fdfdfd'); 
    }, function() { 
     if (/* mouse leaves parent as well */) { 
      // change child color to blue 
     } else if (/* mouse did not leave parent */) { 
      // make child color white 
      $(this).css('color', '#fdfdfd'); 
     } 
    }); 

Там место для улучшения на это, без сомнения, чтобы идти вперед и дать лучший вариант, если это необходимо. :)

Я был прошлой парой часов на этом, но я не могу его решить, я уверен, что это что-то простое, но я не эксперт по jQuery. Спасибо за помощь, которую вы можете предоставить. :)

EDIT:

Ну ... Оказывается, я был более усложняя его. Быть относительным новичком не позволяет вам думать правильно. : P

Answer 1

Вы можете сделать это с помощью CSS и JQuery.

Если вы будете делать это с помощью CSS:

li:hover a{color:#fff;} 
li:hover ul li a{color:#fff;} 

И если вы хотите сделать это с помощью JQuery:

$('ul li').hover(
    function(){$(this).find('a').css('color','#fff');}, 
    function(){$(this).find('a').css('color','##36c');} 
); 

Answer 2

Если я что-то не хватает, jquery здесь слишком много. Простой CSS достаточно:

li:hover{ 
    background-color: blue; 
    color: white; 
} 

Ребенок li наследует цвета от родителя.

http://jsfiddle.net/7Jz9a/

Answer 3

Вы должны быть в состоянии сделать это только с помощью CSS вместо также с помощью ".hover()" JQuery в. Тем не менее, у вашего существующего CSS уже есть противоречивое моделирование :hover, которое не играет хорошо с удвоенным поведением jQuery .hover().

Я бы начал с очистки CSS, и если вам нужно использовать jQuery, то по крайней мере у вас будет более чистый сланец.

Answer 4

Просто используйте

#menu li:hover a { 
    color: white; 
} 

Answer 5

Попробовать следующее простого CSS дополнение

#menu li:hover a{ 
    color: #FDFDFD; 
} 

Надеется, что это поможет