Question

我有html如下所示。我需要在主要项目上显示子菜单项。我已经在这里给出了我的示例html内容。

<ul class="dropdown-menu" role="menu">
    <li data-submenu-id="submenu-patas"> <a href="#">Books & Audible <span style="float:right; padding-left:10px; padding-top:2px;"><i class="fa fa-angle-right"></i></span></a>
                  <div id="submenu-patas" class="popover nav_bg_books">
                    <h3 class="popover-title">Books & Audible</h3>
                    <ul style="float:left; z-index:999; ">
                      <h5 style="color:#C30">Books</h5>
                      <li><a href="products.html">Books</a> </li>
                      <li><a href="products.html">Textbooks</a></li>
                      <li><a href="products.html">Magazine</a></li>
                    </ul>
                    <ul style="float:left; z-index:999;">
                      <h5  style="color:#C30">Audible</h5>
                      <li><a href="products.html">Audible Audiobooks</a></li>
                      <li><a href="products.html">Books with Audio Companions</a></li>
                    </ul>
                  </div>
                </li>
    <li data-submenu-id="submenu-snub-nosed"> <a href="#"> Movies, Music & Games <span style="float:right; padding-top:2px;"><i class="fa fa-angle-right"></i></span></a>
                  <div id="submenu-snub-nosed" class="popover nav_bg_games">
                    <h3 class="popover-title">Movies, Music & Games</h3>
                    <ul style="float:left; z-index:10; ">
                      <h5  style="color:#C30">Movies & TV</h5>
                      <li><a href="products.html">DIGITAL MUSIC</a></li>
                      <li><a href="products.html">Musical Instruments</a></li>
                    </ul>
                    <ul style="float:left; z-index:10;">
                      <h5  style="color:#C30">Games</h5>
                      <li><a href="products.html">Video Games</a></li>
                      <li><a href="products.html">Digital Games </a></li>
                    </ul>
                  </div>
                </li>
    </ul>

我上面有html标签。我需要展示

 <div id="submenu-snub-nosed" class="popover nav_bg_games">...</div>

当鼠标悬停在

上时，

标记内容

书籍＆amp;听得见

使用jquery还是Javascript？任何帮助Plz

Answer 1

假设隐藏了子菜单：

$('ul.dropdown-menu > li')
.mouseover(function() {
    $('.popover.nav_bg_games').show();
})
.mouseout(function() {
    $('.popover.nav_bg_games').hide();
});

Answer 2

 $('ul.dropdown-menu > li')
.mouseover(function() {
    $(this).children('.popover').show(); // find the children with class .popover of hovered item and show it.
})
.mouseout(function() {
    $(this).children('.popover').hide();   // find the children with class .popover of hovered item and hide it.
});

这是工作plunker

使用Javascript Jquery在鼠标悬停主项目上显示子项目

2 个答案: