Hide external node element on hover

Question

I would like to hide bottom and top elements when hovering the center element on this sample :

<div id="tc">
  <span id="ct">top</span>
  <div id="pc">
    <span id="st"></span>
    <span id="tp">center</span>
  </div>
  <span id="tt">bottom</span>
</div>

I have no problem to hide the bottom element with :

#pc:hover ~ #tt { display: none!important; }

I expect to accomplish the same for the top element with :

#ct + #pc:hover { display: none!important; }

But it doesn't work and even break my first instruction.

What am I doing wrong ?

score 0 · Answer 1 · answered Mar 23 '19 at 23:11

actually you can do it with jQuery because selecting an DOM above is very hard. So here is the alternative solution

Step 1: Add jQuery script in your head tag

   <head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>

Step 2: Put this code below your Elements

<script>
 $( "#pc" ).hover(
   function() {
   $( "#ct" ).hide();

   }, function() {
   $( "#ct" ).show();
   }
    );
  </script>

This will do exactly what you want, display: "none" the DOM element with the id "ct".

Hide external node element on hover

1 Answers1