css selector вопрос, как изменить цвет шрифта родительского li, когда дочерний ul сфокусирован

Question

Хорошо, я ударял головой об стену на этом в течение последних двух часов, и я наконец сдался.

У меня есть неупорядоченный список без фона на верхнем уровне с цветом текста #fff.и при наведении на фон становится #fff, а цвет текста становится #000.У меня также есть дети ul, которые имеют фон #fff и цвет текста #000.

Теперь мне нужно знать, как стилизовать изменение цвета текста на верхнем уровне, когда дочерние элементы ul открыты, но ссылки верхнего уровня не накладываются.Я не могу заставить литий верхнего уровня оставаться #000 (у меня есть фон, который нужно прикрепить), как только я убираю свою мышь с ссылок верхнего уровня, чтобы перейти к дочернему элементу, а текст верхнего уровня возвращается к#fff.

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li>About
<ul class="children">
<li><a href="#">About Us</a></li>
</ul>
</li>
</ul>
</div>

.menu ul li{
color: #ffffff;
text-decoration:none;
}
.menu ul li:hover{
color:#000000
background-color:#ffffff;
}

.children{
background-color:#ffffff;
color:#000000
}

Это разметка, которую я мог бы назвать сценарием наилучшего соответствия.У меню ul li нет bg с цветом текста #ffffff.Когда пользователь переворачивает «О программе», фон превращается в #ffffff, а текст - в # 000000.Раскрывающийся список выпадает и выставляет .children ul / li's.которые также имеют тот же цвет bg / text.как только пользователь убирает свою мышь с родительской ссылки li, родительская ссылка li возвращается к белому шрифту на белом фоне.но дети остаются белыми.

Мне нужно, чтобы шрифт стал черно-белым, пока пользователь зависает / нажимает на ребенка.

Answer 1

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

и когда вы обнаруживаете щелчок - вы переходите к его родителям (где у него есть какой-то класс) - и затем

Вы даете родителю стиль ...

http://jsbin.com/ehuke4/25/edit

Answer 2

В вашем css отсутствует точка с запятой:

.menu ul li:hover{
   color:#000000; <!-- insert this semi-colon -->
   background-color:#ff0;
 }

Answer 3

Может дать каждому набору сгруппированных элементов общий класс, а затем использовать jQuery, чтобы установить css для всех членов класса.Поэтому для menu1, menu2 и т. Д. Добавьте следующий код:

$(".menu_1").hover(
   // on mouseover
  function () {
    $(".menu_1).css("background-color", "red");
  }, 
   // on mouseout
  function () {
    $(".menu_1).css("background-color", "white");
  }
);