Question

<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可以用作解决方案。

Answer 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.parents以外的所有ul.special（但该类没有父级）。正确的方法是：.parent li:not(.special)。

Answer 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/

Answer 3

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

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

但是因为你正在使用课程，.parent:hover .child { ... }会不会更简单？

编辑：也许我误解了这个问题，可能会被问得更好。但是，你想要实现的是this吗？

Answer 4

您可以进行特殊div绝对定位，然后禁用其上的指针事件。

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

<强> FIDDLE

Answer 5

JQuery解决方案。

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

切换它

<强> JSFiddle

<强> JQuery的

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

CSS：not（）：悬停选择器

5 个答案: