Question

我创建了一个简单的导航和子导航（在父元素上悬停后激活），但在我的项目中，当我将鼠标悬停在subnavigation的最后一个子节点上时，活动类被删除了。无法弄清楚问题。请帮忙。

这是代码和JSFIDDLE

HTML

<div class="menu-nav">

    <ul>
        <li><a href="" class="current_user"> <span class="user_image"></span>Hi, Inderjeet<b class="caret"></b></a></li>
        <li><span class="bookings">Bookings<b class="caret"></b>
            <ul class="dropdown_menu">
                <li><a href="#">Booking 1</a></li>
                <li><a href="#">Booking 2</a></li>
                <li><a href="#">Booking 3</a></li>
            </ul>
        </span></li>
        <li><span class="hosting">Hosting<b class="caret"></b>
            <ul class="dropdown_menu">
                <li><a href="#">Booking 1</a></li>
                <li><a href="#">Booking 2</a></li>
                <li><a href="#">Booking 3</a></li>
            </ul>
        </span></li>


    </ul>
</div>

CSS

.menu-nav{float:left; }
.menu-nav > ul > li{ display: inline-block; vertical-align: middle; -webkit-vertical-align: middle; -moz-vertical-align: middle; margin-left: 10px; margin-top: 25px;   } 
.menu-nav > ul > li > a, .menu-nav > ul > li > span{color:#4d4d4d; font-size: 16px; padding:5px; position: relative;}

ul.dropdown_menu{display: none; position: absolute; top: 0px; left: 0; padding-top:40px; padding-bottom: 20px; width: 200px;}
ul.dropdown_menu > li > a {color:#4d4d4d; padding:10px; display: block; background:#fff;}
ul.dropdown_menu.activemenu{display: block;}
ul.dropdown_menu.activemenu li a:hover{background:red;}

的jQuery

$('.menu-nav ul li span').hover(function(){
        $(this).find('ul.dropdown_menu').toggleClass('activemenu');
    });

JSFIDDLE

Answer 1

你应该悬停到li元素而不是跨度：

$('.menu-nav > ul > li').hover(function(){

并且ul不应该在html的范围内

Answer 2

您现在尝试这种方式

mouseenter 和 mouseleave

$(".menu-nav ul li span").on({
    mouseenter: function () {
        $(this).find('ul.dropdown_menu').addClass('activemenu');
    },
    mouseleave: function () {
        $(this).find('ul.dropdown_menu').removeClass('activemenu');
    }
});

Demo

或者现在你可以用css

.menu-nav ul li span:hover ul.dropdown_menu{
    display: block;
}

为什么删除CSS悬停状态？

2 个答案: