Это возможно? Мой HTML выглядит так:

<ul>
  <li> <a> link </a> </li>
  <li> <a> link </a> </li>
  <li> <a> link </a> 
    <ul>
      <li> <a> sub-link </a> </li>  
      <li> <a> sub-link </a> </li>  
      <li> <a> sub-link </a> </li>  
    </ul>
  </li>
</ul>  

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

2
Alex 30 Авг 2010 в 02:50

2 ответа

Лучший ответ

Если вы используете .hover(), это также повлияет на родительский элемент, поскольку именно так События mouseenter и mouseleave работают, например:

$("li").hover(function() {
  $(this).toggleClass("active");
});

Вы можете попробовать здесь, в отличие от mouseover и mouseout, события не срабатывают при входе / выходе из дочерних элементов, поэтому действие, выполняемое над родительским элементом, не отменяется до тех пор, пока вы не покинете родительский элемент, что, похоже, именно то, что вам нужно .

Или используйте чистый CSS, если вы просто выполняете стиль, например (не работает в IE6):

li:hover > a { color: red; }​

Вы можете протестировать его здесь.

5
Nick Craver 29 Авг 2010 в 22:53

Вы можете связаться с родительским узлом, используя метод parent (), и переключить его класс, связывая события mouseover и mouseout.

$("#childnode").bind("mouseover", function() {
   $(this).parent().addClass("onmouseover");
}).bind("mouseout", function() {
   $(this).parent().removeClass("onmouseover");
});
1
Zafer 29 Авг 2010 в 23:00