如何选择不在某个选择器中的：悬停答案

【问题标题】：How to select a:hover that's not in a certain selector如何选择不在某个选择器中的：悬停
【发布时间】：2011-01-31 03:19:14
【问题描述】：

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

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

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

【问题讨论】：

不幸的是:not() 只接受一个简单的选择器作为参数。这里，#boat a 表示两个简单的选择器与后代选择器组合，a 是键选择器。你最好的选择是使用 jQuery——我喜欢 Marcus Whybrow 的回答。

标签： jquery css jquery-selectors css-selectors

【解决方案1】：

当涉及到 jQuery 选择器时，a:hover 将选择所有应用了 CSS 伪类 :hover 的 a 元素（即当前被鼠标悬停的 a 元素）。

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

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

演示： http://jsfiddle.net/marcuswhybrow/AMWhU/

如果悬停 jQuery 效果是你想要的，一旦你做出选择，只需像往常一样绑定事件：

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

【讨论】：

因为我似乎无法在普通 CSS 中做到这一点，所以我将继续使用这个答案。谢谢！

【解决方案2】：

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

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

Here's an example.

【讨论】：

您应该在将处理程序绑定到每个a 标签之前正确选择，从而减少集合。

【解决方案3】：

看起来您可以使用否定属性选择器 ('!=')。给定（大部分）您的原始 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' 的节点，并带有一个锚子节点。

【讨论】：