Question

我正在设置一个菜单，其中有一个toggleClass，到目前为止没有问题，但是当我有悬停功能并且我确实悬停然后鼠标在菜单元素上，该功能在所有菜单的元素上执行，我该怎么办设法只影响当时的一个？

菜单：

<div id="menu_segundo">
    <ul>

        <li class="curso av">AV</li>
        <li class="curso dc">DC</li>
        <li class="curso dp">DP</li>
        <li class="curso pa">PA</li>

    </ul>
</div>

Css

#menu_segundo {
margin-top: 20px;
float: right;
background: #58ACFA;
}

.curso {
color: white;
font-family: DIN;
width: 25px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}



.expand_menu{
color: white;
font-family: DIN;
width: 150px;
height: 10px;
border-left: 2px solid white;
padding-left: 10px;
padding-right: 0px;
}

JS

 var segundo = $('#menu_segundo').find('ul').children();

segundo.hover(function(){
$(this).toggleClass('expand_menu');
})

这是菜单的DEMO

Answer 1

这不需要JS来运行。

只需将CSS中的.expand_menu更改为.curso:hover即可。

或者，修复你的JS使用：

$("#menu_segundo").on("hover", ".curso", function(){
    $(this).toggleClass('expand_menu');
});

JS的问题在于您在所有li元素上切换类。 segundo设置为等于所有 li个元素，而不是正在悬停的元素。

<强>更新

除了最初应用类之外还有一个问题，CSS / HTML结构无法正确呈现。问题是，扩展其中一个li元素会增加整个ul移动所有li元素的大小。

将HTML更新为：

<div id="menu_segundo">
    <div class="curso av">AV</div>
    <div class="curso dc">DC</div>
    <div class="curso dp">DP</div>
    <div class="curso pa">PA</div>
</div>

将CSS更新为：

#menu_segundo {
    margin-top: 20px;
    float: right;
}

.curso {
    color: white;
    font-family: DIN;
    width: 25px;
    border-left: 2px solid white;
    padding-left: 10px;
    padding-right: 0px;
    background: #58ACFA;
    float: right;
    clear:both;
}

.curso:hover{
    width: 150px;
}

获取所需的行为。有关示例，请参阅此Fiddle。

注意

CSS也可以设置为

.expand_menu{ width: 150px; }

继续使用JS解决方案。

Answer 2

尝试

var segundo = $('#menu_segundo li')

segundo.hover(function(){
$(this).toggleClass('expand_menu');
})

在悬停时动画的多个类

2 个答案: