CSS :not():hover 选择器答案

【问题标题】：CSS :not():hover selectorCSS :not():hover 选择器
【发布时间】：2014-03-02 22:17:13
【问题描述】：

<div class="parent">
    <div class="child">child1</div>
    <div class="child">child2</div>
    <div class="child">child3</div>
    <div class="child">child4</div>
    <div class="special">specialChild</div>
</div>

当悬停在.child 元素之一上时，我想给.parent 的所有子元素提供另一种背景颜色。将鼠标悬停在 .special 元素上时不应发生这种情况。

到目前为止我尝试了什么：

.child {
    background-color: rgb(255,0,0);
}
.parent:not(.special):hover .child {
    background-color: rgb(0, 0, 255);
}

但是当悬停在 .special 元素上时，背景颜色会发生变化（忽略 not() 选择器）

我错过了什么？

JSFIDDLE：Link

编辑：jQuery 可以用作解决方案。

【问题讨论】：

很确定你不能用 CSS 做到这一点。 JQuery 会是更好的选择。
您错过了这样一个事实，即使用 CSS 将鼠标悬停在 .special 元素上时，您无法控制 .parent 的 css 规则。所以就像@Paulie_D 提到的那样，jQuery 会更好

标签： jquery html css

【解决方案1】：

要创建项目列表，最好使用适当的标签。

使用<ul> 标签和<li> 标签来创建无序列表。 ——w3schools.com。

<ul class="parent">
    <li class="child">child1</li>
    <li class="child">child2</li>
    <li class="child">child3</li>
    <li class="child">child4</li>
    <li class="special">specialChild</li>
</ul>

然后，如果您只想将悬停放在类 .child 的项目上，则需要指定不是悬停指定元素的元素类。

ul.parent li:hover:not(.special) {
    background-color: rgb(0, 0, 255);
}

jsFiddle

您不能使用.parent:not(.special)，因为这样您将选择除ul.special 之外的所有ul.parents（但该类没有父级）。正确的方法是：.parent li:not(.special)。

【讨论】：

【解决方案2】：

将child 元素包装成一个额外的div 并对其应用css 规则，例如：

<div class="parent">
    <div class="children">
        <div class="child">child1</div>
        <div class="child">child2</div>
        <div class="child">child3</div>
        <div class="child">child4</div>
    </div>
    <div class="special">specialChild</div>
</div>

.children:hover .child {
    background: grey;
}

http://jsfiddle.net/UeZNB/1/

【讨论】：

【解决方案3】：

您在父元素上使用not 选择器，显然它永远不会有special 类，正确的方法是：

.parent:hover > div:not(.special) {
  background: papayawhip;
}

但是因为您使用的是类，所以 .parent:hover .child { ... } 会不会更简单？

编辑：也许我误解了这个问题，也许可以问得更好。但是，您想达到类似this 的目标吗？

【讨论】：

感谢您的帮助，请查看eugene82 的回答，看看我在追求什么。

【解决方案4】：

你可以让特殊的 div 绝对定位，然后禁用它上面的指针事件。

   .child {
        background-color: red;
    }
    .parent:hover .child {
        background-color:blue;
    }
    .special
    {
        position: absolute;
        z-index:1;  
        pointer-events:none;
    }

FIDDLE

【讨论】：

pointer-events: none; 太棒了！谢谢你，..

【解决方案5】：

jQuery 解决方案。

为您想要的悬停状态创建一个新类并使用toggleClass 切换它

JSFiddle

JQuery

(function($) {
    $('.child').hover(function() {
        $( ".child" ).siblings( ".child" ).toggleClass('hovered');
    });
})(jQuery);

【讨论】：