多个类在悬停时动画

Multiple classes animating on hover

本文关键字：动画 悬停      更新时间：2023-09-26

我的样式一个菜单，有一个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');
})

下面是菜单的演示

不需要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;
}

获取所需的行为。

注意

CSS也可以设置为

.expand_menu{
    width: 150px;
}

Try like

var segundo = $('#menu_segundo li')
segundo.hover(function(){
$(this).toggleClass('expand_menu');
})
相关文章：