0

I want to display block right-nav, if menu-mobile-button was hovered.I tried various options but nothing's work.

<div class="header">
<div class="menu-mobile-button">
  <h4>Show content</h4>
</div>
</div>


<div class="container-grid">
  <div class="right-nav">
    <p>Hello World</p>
  </div>
</div

I tried:

 .right-nav{
  display: none;
}

.header > .menu-mobile-button:hover + .container-grid > .right-nav {
  display: block;
}
goldevo
  • 1
  • 1
    you cannot with CSS, you will need JS – Temani Afif May 05 '19 at 23:55
  • Option 1 --> use JavaScript: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp). Option 2 --> re-arrange your html, placing your menu inside your trigger element (I'd rather choose this option only if it makes sense from a semantic point of view --if it doesn't make sense to put the menu inside the trigger, then go for option 1) – ludovico May 06 '19 at 00:31
  • You can **fake** it via pointer-events : `.header:hover ~.container-grid {display:block;} .header {pointer-events:none;} .header .menu-mobile-button {pointer-events:auto;} .container-grid {display:none;}` , it works for the bit of code you have given. https://jsfiddle.net/rc14wk68/1/ You can also fake a toggle effect (hide/show, on click https://jsfiddle.net/rc14wk68/2/ – G-Cyrillus May 06 '19 at 00:34
  • You should rewrite your question and give more details. my earlier bits of codes works with the little html you gave, if more complexe and inbricated HTML is involved, it might not. checkbox or radio button (hidden) can also do the job to avoid javascript. You question is too simple to advise you a CSS method or only javascript. As posted, it can only be understood like a duplicate – G-Cyrillus May 06 '19 at 00:45

0 Answers0