CSS：not（）：悬停选择器

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>

When hovering over one of the .child elements, I want to give all of the child elements of .parent to get another background color. This should not happen when hovering over the .special element.

What I tried so far:

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

But when hovering over the .special element, the background color does change (ignoring the not() selector)

What am I missing?

JSFIDDLE: Link

EDIT: jQuery may be used as a solution.

Answer 1

To create a list of items it is better to use the appropriate tags.

Use the <ul> tag together with the <li> tag to create unordered lists . — 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>

Then if you want to put the hover only on the items with the class .child you need to specify the class of element that is NOT the specified element for hover.

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

jsFiddle

You can not use .parent:not(.special) because in this way you are selecting all ul.parents except ul.special (but there is no a parent with that class). The correct way would be: .parent li:not(.special) .

Answer 2

Wrap the child elements into an additional div and apply to it a css rule, eg:

<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

You are using the not selector on the parent element, which obviously will never have the class special , the correct way would be:

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

But because you are using classes, wouldn't be simpler just .parent:hover .child { ... } ?

EDIT: maybe I misunderstood the question, probably could be asked better. However, is something like this you are trying to achieve?

Answer 4

You could make the special div absolute positioning, then disable pointer events on it.

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

FIDDLE

Answer 5

JQuery solution.

Create a new class for the hover state you want and toggle it using toggleClass

JSFiddle

JQuery

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