Hello.

I have a block. Hovering over it hides a block inside ( opacity: 0 ). But when you hover on a child, it hides too. How to make, what would be when you hover on a child, he did not hide?

 .parent { position: relative; width: 200px; height: 200px; background-color: black; } .parent-children { position: absolute; top: 200px; width: 50px; height: 50px; background-color: red; } .parent:hover .parent-children {opacity: 0} 
 <div class="parent"> <div class="parent-children"></div> </div>

    2 answers 2

    To do this, the selector is suitable :not with :hover

     .parent { position: relative; width: 200px; height: 200px; background-color: black; } .parent-children { position: absolute; top: 200px; width: 50px; height: 50px; background-color: red; } .parent:hover .parent-children:not(:hover) {opacity: 0} 
     <div class="parent"> <div class="parent-children"></div> </div>

      It can be interrupted by the equivalent rule declared after. This means that .parent-children:hover {opacity: 1} will not work, and the more accurate .parent .parent-children:hover {opacity: 1} will work.

       .parent { position: relative; width: 200px; height: 200px; background-color: black; } .parent-children { position: absolute; top: 200px; width: 50px; height: 50px; background-color: red; } .parent:hover .parent-children {opacity: 0} .parent .parent-children:hover {opacity: 1} 
       <div class="parent"> <div class="parent-children"></div> </div>