gpt4 book ai didi

javascript - 悬停时的多个类动画

转载 作者:行者123 更新时间:2023-11-30 12:40:08 24 4
gpt4 key购买 nike

我正在设计一个菜单,其中有一个 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菜单的

最佳答案

这不需要JS来运行。

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

或者,要修复您的 JS,请使用:

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

您的 JS 的问题是您在所有 li 元素上切换类。 segundo 设置为等于 all 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 解决方案。

关于javascript - 悬停时的多个类动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24791751/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com