如何在子菜单上添加悬停效果？答案

【问题标题】：how can I add a hover effect on submenu?如何在子菜单上添加悬停效果？
【发布时间】：2017-04-15 23:38:38
【问题描述】：

我正在尝试创建自己的引导 html5 主题，但我希望在打开子菜单后使用 jquery 添加悬停 css。我只想要子菜单有悬停。到目前为止我已经这样做了，但是我一直在努力如何将悬停动作 onyl 添加到我的子菜单中

jQuery

$(function (event) {
    $(document).ready(function() {
        $('.site-menu li:has(ul)').click(function(e) {
            e.preventDefault();
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                $(this).children('ul').slideUp();
            }else{
                $('.site-menu li ul').slideUp();
                $('.site-menu li').removeClass('active');
                $(this).addClass('active');
                $(this).children('ul').slideDown();
            }
        });
    });
});

查看

  <div class="site-menubar site-menubar-light site-menubar-light">
    <div class="site-menubar-body" style="position: relative;">
        <div style="height: 652px; width: 277px;">
            <div style="width: 260px;">
                <ul class="site-menu">
                    <li class="site-menu-item"><a href="#"><i class="fa fa-tachometer site-menu-icon" aria-hidden="true"></i> 
                      <span class="site-menu-title">Dashboard</span>
                      <div class="site-menu-badge">
                        <span class="badge badge-success">3</span>
                      </div>
                    </a>
                      <ul class="site-menu-sub">
                          <li class="site-menu-item"><a href="menu-collapsed.html"><span class="site-menu-title">item 1</span></a></li>
                          <li class="site-menu-item"><a href="#"><span class="site-menu-title">item 2</span></a></li>
                          <li class="site-menu-item"><a href="#"><span class="site-menu-title">item 3</span></a></li>
                          <li class="site-menu-item"><a href="#"><span class="site-menu-title">item 4</span></a></li>
                      </ul>
                    </li>
                    <li class="site-menu-item"><a href="#">item 2</a>
                      <ul class="site-menu-sub">
                          <li class="site-menu-item"><a href="#">item 5</a></li>
                          <li class="site-menu-item"><a href="#">item 6</a></li>
                          <li class="site-menu-item"><a href="#">item 7</a></li>
                          <li class="site-menu-item"><a href="#">item 8</a></li>

                      </ul>
                    </li>
                    <li class="site-menu-item"><a href="#">item 3</a>
                      <ul class="site-menu-sub">
                          <li class="site-menu-item"><a href="#">item 9</a></li>
                          <li class="site-menu-item"><a href="#">item 10</a></li>
                          <li class="site-menu-item"><a href="#">item 10</a></li>
                          <li class="site-menu-item"><a href="#">item 12</a></li>
                      </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
  </div>

【问题讨论】：

标签： jquery twitter-bootstrap-3

【解决方案1】：

尝试将此 css 添加到您的样式表中：

.site-menu-sub .site-menu-item:hover {
    background-color: blue;
}

两个类之间的空间是有意义的。它指示样式应应用于“site-menu-item”类的元素，这些元素是 site-menu-sub 的子元素。

【讨论】：

我的意思是使用 jquery，