wordpress menu hover div display issue

Question

I have put additional css in customize section of theme:

.toshow {
    display: none;
}
.nav > li > a:hover .toshow {
    display: block;
}

and following divs are in header.php

<div class="toshow">Hello</div>
<div class="toshow">Hi</div>

but div is not being shown when I hover mouse over menus.

Menu:

<div id="et-top-navigation" data-height="106" data-fixed-height="40">
  <nav id="top-menu-nav">
    <ul id="top-menu" class="nav et_disable_top_tier">
      <li id="menu-item-3987" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-38 current_page_item menu-item-3987">
        <a href="http://test.elancebank.com/">Home Page</a>
      </li>
      <li id="menu-item-3988" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3988">
        <a href="http://test.elancebank.com/smartphones/">Smartphones</a>
      </li>
      <li id="menu-item-3989" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3989">
        <a href="http://test.elancebank.com/laptops/">Laptops/Tablets</a>
      </li>
      <li id="menu-item-3990" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3990">
        <a href="http://test.elancebank.com/electronics/">Electronics</a>
      </li>
    </ul>
  </nav>
  <div id="et_top_search">
    <span id="et_search_icon"></span>
  </div>

  <div id="et_mobile_nav_menu">
    <div class="mobile_nav closed">
      <span class="select_page">Select Page</span>
      <span class="mobile_menu_bar mobile_menu_bar_toggle"></span>
    </div>
  </div>
</div> <!-- #et-top-navigation -->

Can you show the rendered html rather than the php please, but your css selector is saying that those toshow divs need to be children of the links — Pete, May 17 '17 at 10:07
Ok your divs are not children of the links so your display-block will not work, also how is a link tied to a div or is any link meant to show all divs? — Pete, May 17 '17 at 10:11
I'm thinking you may need to use js for this as usually if the div is not a child / sibling, then you cannot do anything using pure css and hover - [these are the pure css solutions](http://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a) (note they are all children or sibllings that are shown), and [this would be the js alternative](http://stackoverflow.com/questions/35948244/hover-over-one-element-shows-div-and-show-second-second-div-while-hovering-over) — Pete, May 17 '17 at 10:15

score 1 · Answer 1 · answered May 17 '17 at 10:14

I think you should try to use jquery to show and hide your element in the header on hover link.

Please check this:

$(document).ready(function(){
    $(".nav li a").mouseenter(function(){
        $('.toshow').show();
    });
    $(".nav li a").mouseout(function(){
        $('.toshow').hide();
    });
});

.toshow {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="nav">
<li><a href="#">Link</a></li>
</div>

<div class="toshow">Hello</div>
<div class="toshow">Hi</div>

This is the standard way to show or hide div outside in other section. I prefer to use jquery for this.

I know you want to try with CSS but you can try in a different way like this also.

Thanks.

wordpress menu hover div display issue

1 Answers1