Hover on parent but not affecting child element

Question

I'm trying to darken on hover a parent div element which has a paragraph tag inside(this is child element). The

element is affected by darkening of the parent when hovered and the color of the font goes darker as well which is not what I want to achieve (color of the

element should be bright as default).

.parent {
  background-color: lightgrey
}

.parent:hover {
  filter: brightness(50%); //this affects also child element
}

<div class="parent">
  <p class="children">Paragraph</p>
</div>

A filter affects the entire element, including its children. Just use a darker shade of blue instead. — , Feb 15 '19 at 08:25
Do you have a more detailed example as there may be alternative solutions to what you are trying to achieve with the filter property. — Ginger Wizard, Feb 15 '19 at 08:28

score 1 · Answer 1 · answered Feb 15 '19 at 08:26

To affect only the child you can do something like this:

.parent, .children {
  background:white;
} 
.parent:hover {
  background: black; //this affects the parent and the child
}
.parent:hover .children {
  background: white; //this affects only child
}

So what you are doing is overriding the children hover, so it is like you are excluding the child. So what happens is that both are white, you hover over parent, they both become black, but immediately get overridden by .parent:hover .children so children stay white.

This will not work with filter css property. – jcubic Feb 15 '19 at 09:43 — jcubic, Feb 15 '19 at 09:43

Hover on parent but not affecting child element

1 Answers1