5

I have some code which requires the same hover effect on every div. However, when the mouse hovers over the child, I don't want the effect to persist on the parent. I understand why it does - because when you hover over either parent or child, the mouse is still over the parent!

This example shows the problem well.

div {
  background: blue;
  min-width: 500px;
  min-height: 90px;
  margin: 40px;
  color:white;
  border: solid 2px white;
}

div:hover {
  background: green;
}
<div>
hover here and it is green. This is great.
    <div>
    hover here and I'd like there to be a blue parent and this should remain as the green child
    </div>
</div>

https://jsfiddle.net/5k0gaq37/8/

What I want is when the mouse hovers over the child div, the hover effect no longer affects the parent. The HTML must remain as is (although I can add another css class to any div etc), as must the existing CSS. The parent CSS could be of any style

I have tried so many ideas, it is pointless showing any as they're all so different so please excuse that I show nothing else.

MyDaftQuestions
  • 4,487
  • 17
  • 63
  • 120
  • 1
    I have updated my question slighty in the snippet. That won't work @VXp as it will prevent the parent from changing colour at all – MyDaftQuestions Apr 16 '18 at 19:50
  • I think since there isn't a way to get the parent the best way would be to do this through JavaScript by adding classes to the divs. Then you can make sure you remove the class from the parent when the child has it. – adprocas Apr 16 '18 at 19:50
  • @adpro I am confident in JavaScript but I was hoping there was a CSS only option. This question is as much about learning the limiations of CSS as it is about getting an answer :) – MyDaftQuestions Apr 16 '18 at 19:51
  • @MyDaftQuestions, I don't think there is an easy way. This has been asked before as well - https://stackoverflow.com/questions/17923922/hover-on-child-without-hover-effect-on-parent – adprocas Apr 16 '18 at 19:52
  • Sorry about not seeing the dupe. I did research this first :( – MyDaftQuestions Apr 16 '18 at 19:53
  • @MyDaftQuestions, I don't doubt it. Your question is well formulated and everything. – adprocas Apr 16 '18 at 19:53

0 Answers0