addClass () для определенных элементов в содержащей обертке

Question

Я ломал голову над тем, как этого добиться. У меня есть содержащий элемент, в котором есть два отдельных тега a, которые я хочу addClass() (то есть, когда я наводю курсор мыши на один тег a, он добавляет класс к этому, а другой a тег внутри этого содержащего элемента). Я вроде как с помощью приведенного ниже кода:

<li class="element">
<header>
   <h1>Heading</h1>
</header>
   <a href="">
      <img src="image" alt=" dummy" />
   </a>
   <div>
      <h2><a href="">Heading 2</a></h2>
      <p>Paragraph</p>
   </div>
</li>

$('.element').hover(
 function() {
  $(this).children().addClass('hover');
},
 function() {
  $(this).children().removeClass('hover');
}
);

Тем не менее, я хочу, чтобы наведение вызывалось только на самом «а», а не на всем элементе. К сожалению, когда я использую этот метод:

$('.element a').hover(
 function() {
  $(this).addClass('hover');
},
 function() {
  $(this).removeClass('hover');
}
);

Он только добавляет класс к первому тегу 'a'.

Любой совет будет принят с благодарностью.

Answer 1

Вам необходимо применить addClass к каждому элементу ... попробуйте это:

$('.element a').each(function() {
    $(this).hover(function() {
        $(".element a").each(function() {
            $(this).addClass('hover');
        });
    }, function() {
        $(".element a").each(function() {
            $(this).removeClass('hover');
        });

    });
});

http://jsfiddle.net/manseuk/GqP4Z/

Answer 2

$('.element a').hover(
 function() {
  $(this).add($(this).siblings()).addClass('hover');
},
 function() {
  $(this).add($(this).siblings()).removeClass('hover');
}
);

$ (this) содержит только фактический объект, находящийся в процессе поиска.Я .add () - отредактировал братьев и сестер объекта для этого набора, вы можете отфильтровать его с помощью $ (this) .siblings ('a') или аналогичного, если вы предпочитаете.