如何选择不在特定选择器中的：hover

发布于 2024-10-14 19:11:40 字数 320 浏览 2 评论 0原文

我想对不在特定 id 中的 a 元素进行样式设置。例如，假设这是我的 HTML：

<div id="boat">
   <a href="#">I'm in a boat! ☻</a>
</div>
<a href="#">☹</a>

现在，假设我只想设置不在船上的 a 元素的样式。我期望类似 a:hover:not(#boat a) 的东西能够工作，但可惜的是，它没有。有什么办法可以让我做我想做的事吗？

原文

I would like to style a elements that are not in a certain id. For example, let's say this is my HTML:

<div id="boat">
   <a href="#">I'm in a boat! ☻</a>
</div>
<a href="#">☹</a>

Now, let's say I only want to style the a element that's not in a boat. I expected something similar to a:hover:not(#boat a) to work, but alas, it doesn't. Is there a way I can do what I want to do?

分享到QQ

分享到微博

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

发布评论

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

時窥 2024-10-21 19:11:40

当谈到 jQuery 选择器时，a:hover 将选择所有应用了 CSS 伪类 :hover 的 a 元素（即 < code>a 当前鼠标悬停在其上的元素）。

这是选择过程，而不是样式选择，要选择您正在讨论的元素，请尝试以下操作：

$('a:not(#boat a)')

DEMO： http://jsfiddle.net/marcuswhybrow/AMWhU/

如果悬停 jQuery 效果是在您做出选择后，只需绑定即可活动如常：

$('a:not(#boat a)').hover(function() {});

When it comes to jQuery selectors a:hover will select all the a elements which have the CSS pseudo class :hover applied to it (i.e. a elements which are currently being hovered over with the mouse).

This is the selection process, and not the styling selection, to select the elements you are talking about, try this instead:

$('a:not(#boat a)')

DEMO: http://jsfiddle.net/marcuswhybrow/AMWhU/

If a hover jQuery effect is waht you are after the once you have made the selection just bind the event as usual:

$('a:not(#boat a)').hover(function() {});

回复收藏 0 原文

焚却相思 2024-10-21 19:11:40

不在该 div#id 内的链接将具有 .closest('div#id').length === 0，并且由于 0 为 false，因此您可以在与以下相反的方式设置这些链接的样式：

$('a').hover(function(e){
    if (!$(this).closest('div#boat').length) {
        // YOUR CODE HERE
    }
});

这是一个示例。

Links not within that div#id will have .closest('div#id').length === 0, and since 0 is false, you can select on the opposite of those as follows to style those links:

$('a').hover(function(e){
    if (!$(this).closest('div#boat').length) {
        // YOUR CODE HERE
    }
});

Here's an example.

回复收藏 0 原文

蛮可爱 2024-10-21 19:11:40

看起来您可以使用否定属性选择器（'！='）。给定（大部分）您的原始 html：

<script src="/Users/kburton/Downloads/jquery-1.4.4.min.js">
    </script>
<div id="boat">
  <a href="#">I'm in a boat!</a>
</div>
<div id='car'>
  <a href="#">I'm in a car!</a>
</div>
<a href="#">I'm not in the boat!</a>

在 javascript 控制台，运行：

$('[id!="boat"] > a')

查找所有没有 id 'boat' 且带有锚子节点的节点。

It looks like you can use a negating attribute selector ('!='). Given (mostly) your original html:

<script src="/Users/kburton/Downloads/jquery-1.4.4.min.js">
    </script>
<div id="boat">
  <a href="#">I'm in a boat!</a>
</div>
<div id='car'>
  <a href="#">I'm in a car!</a>
</div>
<a href="#">I'm not in the boat!</a>

At the javascript console, running: