addClass() 到包含包装器中的特定元素

发布于 2024-12-14 15:06:01 字数 906 浏览 2 评论 0原文

我一直在绞尽脑汁地思考如何实现这一目标。我有一个包含元素，其中有两个单独的 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”标记。

任何建议将不胜感激。

原文

I have been wracking my brains as to how to achieve this. I have a containing element, which has two separate a tags within it that I want to addClass() to (i.e. when I hover over one a tag, it adds the class to that one, and the other a tag within that containing element). I kind of had it by using the below code:

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

However I only want the hover triggered when on the 'a' itself, not on the entire element. Unfortunately, when I use this method:

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

It only adds the class to the first 'a' tag.

Any advice would be greatly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挽袖吟 2024-12-21 15:06:02

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

You need to apply the addClass to each element ... try this :

$('.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/

回复收藏 0 原文

っ〆星空下的拥抱 2024-12-21 15:06:01

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

$(this) 仅包含悬停的实际对象。我将对象的兄弟姐妹添加到该集合中，如果您愿意，您可以使用 $(this).siblings('a') 或类似的方法对其进行过滤。

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

$(this) only contains the actual object being hovered. I .add()-ed the siblings of the object to that set, you can filter it with $(this).siblings('a') or similar, if you prefer.

回复收藏 0 原文

~没有更多了~