CODEWITHSUNDEEP
jqueryhtmlcss
Astrid
Astrid

Reputation: 1312

CSS :not():hover selector

<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.

Upvotes: 5

Views: 22793

Answers (5)

Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

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).

Upvotes: 8

Danield
Danield

Reputation: 125443

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

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115010

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);

Upvotes: 0

eugene82
eugene82

Reputation: 8832

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

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

Upvotes: 4

Gianluca Mancini
Gianluca Mancini

Reputation: 1312

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?

Upvotes: 2

Related Questions