CSS on parent hover keep child not filter-grayscaled

Question

I have two blocks- parent and child. On hover- parent block change grayscale. How can i keep child div with green color on hover (not grey, but green)?

<style>
.parent {
   color:red
   width: 100px;
   height: 100px;
}
.child {
   color: green
   width: 50px;
   height: 50px;
}
.parent:hover {
   filter: grayscale(100%)
}
</style>

<div class="parent">
   <div class="child">
   </div>
</div>

**You can't**. The filter affects the parent and all descendants. Perhaps you shoudl show us what you are **actually** trying to achieve. — Paulie_D, Aug 04 '16 at 14:42
So, i should move child block out of parent and make it position: absolute? This is the only solution? — Mr.White, Aug 04 '16 at 14:44
What would that do? You need to show us what you are trying to do...presumably there's an image or two involved? — Paulie_D, Aug 04 '16 at 14:45
Checkout this question: http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image — Fma, Aug 04 '16 at 14:50

score 1 · Answer 1 · answered Aug 04 '16 at 14:51

I couldn't think of direct way, but here is an workaround using absolute positioning.

<style>
  .wrapper {
    position: relative
  }
  .parent {
    background-color: red;
    width: 100px;
    height: 100px;
  }
  .child {
    background-color: green;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .parent:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
  }
</style>
<div class="wrapper">
  <div class="parent">
  </div>
  <div class="child">
  </div>
</div>

score 1 · Answer 2 · edited Aug 04 '16 at 14:59

1

No. All child elem to be grayscalled. But try this:

.parent {
  width: 100px;
  height: 100px;
  position: relative;
}
.childbg {
  background-color: red;
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 0;
}
.child {
  background-color: green;
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 10;
}
.parent:hover > .childbg {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

<div class="parent">
  <div class="childbg"></div>
  <div class="child"></div>
</div>

edited Aug 04 '16 at 14:59

Pugazh

9,453
5
33
54

answered Aug 04 '16 at 14:54

Andrei Fedorov

3,689
2
13
25

so... and what happend? – Andrei Fedorov Aug 04 '16 at 14:58

score 0 · Answer 3 · edited Feb 15 '19 at 08:33

0

.granny {
  width: 100px;
  height: 100px;
}

.parent {
  color: red; width: 100px;
  height: 100px;
}

.child {
  position: absolute;
  color: green width: 50px;
  height: 50px;
}

.parent:hover {
  filter: grayscale(100%)
}

<div class="granny">Granny
  <div class="parent">Parent</div>
  <div class="child">Child</div>
</div>

edited Feb 15 '19 at 08:33

mplungjan

169,008
28
173
236

answered Aug 04 '16 at 14:57

Mr.White

25
6

rodcunha · Answer 4 · 2016-08-04T14:50:35.677

-1

Since you've added more code, I'm not sure exactly what you're trying to achieve but this should not apply the filter to the child.

.parent+child :hover {
   filter:none;
}

edited Aug 04 '16 at 14:50

answered Aug 04 '16 at 14:43

rodcunha

387
1
16

CSS on parent hover keep child not filter-grayscaled

4 Answers4

Linked

Related