javascript - 努力理解 jquery - 在鼠标悬停时淡入/淡出一个类

Question

我目前正在尝试学习 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');
    })

    });

如果有人能提供帮助，那就太好了，因为我真的被困在这个问题上了。

Answer 1

类不能淡入或淡出。 fadeIn 和 fadeOut 用于元素的不透明度。如果你真的想要 ›fade‹ 一种风格，你必须编写自己的动画代码(我不推荐)或使用 CSS3 transitions ，无论如何我都会推荐。