Question

我正在尝试创建自己的bootstrap html5主题，但我希望一旦子菜单打开，使用jquery添加hover css。我只希望子菜单悬停。到目前为止我已经完成了这个，但是我已经知道如何将hover动作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>

Answer 1

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

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

两个班级之间的空间是有意义的。它表示该样式应该应用于类＆＃39; site-menu-item＆＃39;的元素。这是site-menu-sub的子元素。

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

1 个答案: