Geek Answers Handbook

Show div only when specifying direct parent

I try to make a div when you just hover its direct parent div . Right now the div will show when you hover over any div of this type. See this simple example of a problem.

How can I only make a div .menu div when the mouse hangs directly over that div (and not the child divs)?

 .widget { width: 150px; height: 150px; background-color: #ddd; position: relative; } .menu { background-color: #444; display: flex; position: absolute; top: 0; display: none; } .widget:hover > .menu { display: flex; } 
 <div class="widget" style="width: 500px; height: 500px; background-color: #eee;"> <div class="menu"> <p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p> </div> <div class="widget" style="left: 200px; top: 200px;"> <div class="menu"> <p>I should ONLY be visible when you hover the small inner widget</p> </div> </div> </div>
+6
source share
5 answers

If you cannot change the layout, you cannot target the first menu item and hide it when the .widget child freezes. You will need to use JS.

I can not use JS, you will need to change your makup, you can achieve two goals:

Put the first .menu after the child .widget so that you can configure it with the .widget:hover > .widget:hover + .menu when the child widget hangs:

 .widget { width: 500px; height: 500px; position: relative; background-color: #eee; } .widget > .widget{ left: 200px; top: 200px; width: 150px; height: 150px; background-color: #ddd; } .menu { background-color: #444; display: flex; position: absolute; top: 0; display: none; } .widget:hover > .menu { display: flex; } .widget:hover > .widget:hover + .menu { display: none; } 
 <div class="widget"> <div class="widget"> <div class="menu"><p>I should ONLY be visible when you hover the small inner widget</p></div> </div> <div class="menu"><p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p></div> </div>

The second approach was to make the .widget one of the first:

 .wrap { position: relative; width: 500px; height: 500px; } .widget { position: absolute; background-color: #ddd; } .w1 { width: 500px; height: 500px; background-color: #eee; } .w2 { left: 200px; top: 200px; width: 150px; height: 150px; } .menu { background-color: #444; display: flex; position: absolute; top: 0; display: none; } .widget:hover > .menu { display: flex; } .widget:hover > .widget:hover + .menu { display: none; } 
 <div class="wrap"> <div class="widget w1"> <div class="menu"><p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p></div> </div> <div class="widget w2"> <div class="menu"><p>I should ONLY be visible when you hover the small inner widget</p></div> </div> </div>

On the side of the note, you should try not to use inline CSS.

+1
source

You can use jquery for this. use the stopPropogation() event handler. There may be a way in direct css, but I don't know about that. This is what I used and works well.

 $("div.widget").mouseover( function(e) { e.stopPropagation(); $(this).children(".menu").css("display", "flex"); }).mouseout( function() { $(this).children(".menu").css("display", "none"); });

JSFIDDLE

0
source

Looks like we need JS here. This is not possible in CSS with existing markup, but try something here:

You can try sibling selectors to complete the task for you - change the layout first.

Add a menu below the internal widget , and then use the CSS below and there you go!

 .widget:hover ~ .menu { display: none; } 

 .widget { width: 150px; height: 150px; background-color: #ddd; position: relative; } .menu { background-color: #444; display: flex; position: absolute; top: 0; display: none; } .widget:hover > .menu { display: flex; } .widget:hover ~ .menu { display: none; } 
 <div class="widget" style="width: 500px; height: 500px; background-color: #eee;"> <div class="widget" style="left: 200px; top: 200px;"> <div class="menu"> <p>I should ONLY be visible when you hover the small inner widget</p> </div> </div> <div class="menu"> <p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p> </div> </div>

JS solution (general case) :

 $(".widget").on('mouseover', function(event) { event.stopPropagation(); $(this).find(">.menu").css("display", "flex"); }); $(".widget").on('mouseout', function() { $(this).find(">.menu").css("display", "none"); }); 
 .widget { width: 150px; height: 150px; background-color: #ddd; position: relative; } .menu { background-color: #444; display: flex; position: absolute; top: 0; display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="widget" style="width: 500px; height: 500px; background-color: #eee;"> <div class="widget" style="left: 200px; top: 200px;"> <div class="menu"> <p>I should ONLY be visible when you hover the small inner widget</p> </div> </div> <div class="menu"> <p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p> </div> </div>
0
source

When you hover parent element ie .widget over-here, you want .menu be visible. You can do this by using nth-child to specify the specified child.

Try as shown below.

 .widget:nth-child(1):hover > .widget:nth-child(2) > .menu{ background:orange; display:flex; } 

 .widget { width: 150px; height: 150px; background-color: #ddd; position: relative; } .menu { background-color: #444; display: flex; position: absolute; top: 0; display: none; } .widget:nth-child(1):hover > .widget:nth-child(2) > .menu{ background:orange; display:flex; } 
 <div class="widget" style="width: 500px; height: 500px;background:#eee"> <div class="menu"> <p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p> </div> <div class="widget" style="left: 200px; top: 200px;"> <div class="menu"> <p>I should ONLY be visible when you hover the small inner widget</p> </div> </div> </div>

And if you want .menu appear when you hover over them, you must change its property, that is, remove display:none; and set opacity:0.01 .

 .widget:nth-child(1) > .menu:hover{ opacity:1; } .widget:nth-child(2) > .menu:hover{ opacity:1; } 

 .widget { width: 150px; height: 150px; background-color: #ddd; position: relative; } .menu { background-color: #444; display: flex; position: absolute; top: 0; opacity:0.01; } .widget:nth-child(1) > .menu:hover{ opacity:1; } .widget:nth-child(2) > .menu:hover{ opacity:1; } 
 <div class="widget" style="width: 500px; height: 500px;background:#eee"> <div class="menu"> <p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p> </div> <div class="widget" style="left: 200px; top: 200px;"> <div class="menu"> <p>I should ONLY be visible when you hover the small inner widget</p> </div> </div> </div>
0
source

If you want to do it your own way, you can simply edit your CSS this way.

 .widget { width: 150px; height: 150px; background-color: #ddd; position: relative; } .menu { background-color: #444; display: flex; position: absolute; top: 0; display: none; } .widget:hover > .menu { display: flex; } .widget:hover > .widget > .menu{ display: block; }
0
source

More articles:


All Articles