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');
}
);

但是我只希望在'a'本身时触发悬停，而不是在整个元素上触发。不幸的是，当我使用这种方法时：

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

它只将类添加到第一个'a'标记。

非常感谢任何建议。

Answer 1

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

$（this）仅包含悬停的实际对象。我.add（） - 对象的兄弟姐妹到那个集合，如果你愿意，你可以用$（this）.siblings（'a'）或类似的东西过滤它。

Answer 2

您需要将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/

addClass（）到包含的包装器中的特定元素

2 个答案: