Override :hover of parent on child

Question

I have something like this:

<div class="parent">
    <div>Normal item</div>
    <div class="special">Special item</div>
</div>

Now I want to set the opacity to 50% when I hover over the div.parent, but I don't want this to effect the Special item.

I tried the following:

.parent:hover {
    opacity: 50%;
}
.special {
    opacity: 100% !important
}

But this doesn't work, is there someway to select that the .special children always have opacity: 100%?

EDIT: I now tried the following

.parent:hover {
    opacity: 50%;
}

.parent:hover .special {
    color: white;
    opacity: 100% !important;
}

The Color changes to white, but the opacity isn't affected.

That's not possible. If you say that an item hat only 50% opacity, all the children are affected by it. You can't revert it for subchildren because this is like a filter you lac on top of all elements. — cloned, Jan 10 '20 at 20:40

Shiny · Answer 1 · 2020-01-10T20:41:58.203

Target the child div elements when you hover the .parent, rather than the entire div

.parent:hover > div {
    opacity: 50%;
}

.special {
    opacity: 100% !important
}

<div class='parent'>
  <div>Normal Item</div>
  <div class="special">Special item</div>
  <div>Normal Item</div>
</div>

You could also use .not()

.parent:hover > div:not(.special) {
    opacity: 50%;
}

<div class='parent'>
  <div>Normal Item</div>
  <div class="special">Special item</div>
  <div>Normal Item</div>
</div>

score 1 · Accepted Answer · answered Jan 10 '20 at 20:41

Instead of changing the opacity property you can change the color using rgba:

.parent:hover {
   color: rgba(0,0,0,.5);
}
.special {
    color: rgba(0,0,0,1);
}

<div class="parent">
    <div>Normal item</div>
    <div class="special">Special item</div>
</div>

2 Answers2