Question

我在主题的自定义部分添加了额外的css：

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

以及以下div在header.php中

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

但是当我将鼠标悬停在菜单上时，不会显示div。

菜单：

<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 -->

Answer 1

我认为您应该尝试使用jquery在悬停链接的标题中显示和隐藏您的元素。

请检查：

＆＃13;

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

＆＃13;

.toshow {
    display: none;
}

＆＃13;

<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>

＆＃13;

这是在其他部分中显示或隐藏div的标准方法。我更喜欢使用jquery。

我知道你想尝试使用CSS，但你也可以尝试不同的方式。

感谢。

wordpress菜单悬停div显示问题

1 个答案: