在悬停的多个动画类动画

我正在设计一个菜单，其中有一个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'); 
})

这是菜单

来源

2014-07-16 Miguel

这并不需要JS的功能的DEMO 。

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

另外，解决您的JS使用：

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

与JS的问题是，你切换所有li元素的类。 segundo被设定为等于所有li元件，而不是一个被徘徊。

UPDATE

没有超出最初的应用类的问题时，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的解决方案。

来源

2014-07-16 22:20:21 sharf

+1两个纯CSS和JS事件委派 – agrm

我想你说的CSS，同样的问题，jQuery的不工作 – Miguel

@Miguel我认为这个问题与做你的CSS没有达到您的期望，并不是我提供的解决方案无法正常工作。当你将鼠标悬停在“li”上时，它会根据你的要求应用这个类。您现在遇到的问题是什么？它应该怎么看？ – sharf

尝试像

var segundo = $('#menu_segundo li') 

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

来源

2014-07-16 22:20:25 Arunkumar

在悬停的多个动画类动画

回答

相关问题