我目前正在尝试学习 jQuery 和 JavaScript,对于我的导航,我试图让它在鼠标悬停时看起来带有下划线,虽然它可能没有清除代码,但我已经设法使用 addClass 做到了和 removeClass。
我现在正在尝试让下划线类淡入和淡出,我相信这通常是用 CSS3 完成的,但由于只是想学习 jquery,我一直在努力弄清楚。
我试过将 .fadeIn() 和 .fadeOut() 放在代码的不同位置,但似乎没有任何效果,所以我假设这不是正确的做法。
这是我的代码
HTML
<div class="navleft">
<ul>
<li class="active">Home</li>
<li class="active1">Dealerships</li>
<li class="active1">Contact</li>
</ul>
</div>
CSS
.navleft ul li.active1 {
border-width: 0 0 1px 0;
border-color: #999;
border-style: solid;
cursor: pointer;
}
.navleft ul li.active {
border-width: 0 0 1px 0;
border-color: #999;
border-style: solid;
cursor: pointer;
}
Javascript
$(function(){
$('.navleft ul li').removeClass('active1');
$('.navleft ul li').mouseover(function(){
$(this).addClass('active1');
});
$('.navleft ul li').mouseout(function(){
$(this).removeClass('active1');
})
});
如果有人能提供帮助,那就太好了,因为我真的被困在这个问题上了。
最佳答案
类不能淡入或淡出。 fadeIn
和 fadeOut
用于元素的不透明度。如果你真的想要 ›fade‹ 一种风格,你必须编写自己的动画代码(我不推荐)或使用 CSS3 transitions ,无论如何我都会推荐。
关于javascript - 努力理解 jquery - 在鼠标悬停时淡入/淡出一个类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24578791/