Javascript / Jquery Tree Обходной вопрос

Question

Предположим, у меня есть следующее

<ul>
<li>Item 1</li>
<li>Item 2
   <ul>
    <li>Sub Item</li>
   </ul>
</li>
<li>Item 3</li>
</ul>

Этот список автоматически генерируется другим кодом (поэтому о добавлении исключительного идентификатора / класса не может быть и речи. Предположим, у меня есть некоторый код jquery, в котором говорится, что если я наведу курсор мыши на li, он получит цвет фона. если навести курсор мыши на элемент списка «Sub Item», будет также выделен «Item 2». Как я могу сделать так, чтобы, если пользователь наведет курсор мыши на «Sub Item», он только накладывал цвет фона на этот элемент, а не на «Item» 2 ", а?

Я также забыл упомянуть, что у меня уже есть что-то вроде $ ("li"). DoSomething ... уже на странице ...

Answer 1

Сначала вам понадобится немного CSS, класс при наведении и фон для элементов <li>, чтобы фон родительского элемента не отображался у дочерних элементов (потому что в противном случае у них прозрачный фон, поэтому независимо от родительского элемента)покажет), как это:

​.hover { background: #ddd; }
li { background: #fff; }

Тогда вы можете использовать mouseover и mouseout ( не mouseenter и mouseleave как .hover() использует), вот так:

$('li').mouseover(function(e){
    $(this).addClass("hover").parents().removeClass("hover");
    e.stopPropagation();
}).mouseout(function(){
    $(this).removeClass("hover");
});​

Вы можете увидеть рабочую демонстрацию здесь .Используются .mouseover() и .mouseout() (поэтому он срабатывает при входе / выходе из дочернего элемента, чего, в частности, mouseenter / mouseleave не будет).При наведении курсора мы применяем класс hover к текущему <li> и удаляем класс из всех родителей, которые могут его иметь.Кроме того, мы предотвращаем всплытие события с event.stopPropagation(), поэтому с родителями этого элемента не происходит то же самое ... просто закомментируйте это в демоверсии, чтобы увидеть, как это влияет на вещи:)

1034 *

Answer 2

попробуйте $ ('ul li li') как ваш селектор.IE

ul li li:hover {background:#00F;}

EDIT

Для решения JQuery это тот же селектор.IE

`$ ('ul li li'). Css ('background', '# 00F');