Question

我正在尝试为菜单项选择时创建不同的动画鼠标。我正在编写第一部分（工作）的代码，并在第一个鼠标上编程并点击功能将其类从.menu更改为.selected。当我点击时，我可以在“检查元素”中看到元素的类确实发生了变化，但是鼠标悬停就好像是.menu类。

HTML：

<nav>
        <ul>
            <li class="menu"><div id="work">WORK</div></li>
            <li class="menu">CAREER</li>
            <li class="menu">CONTACT</li>
            <li class="menu">ABOUT</li>
        </ul>
    </nav>

JS：

$(document).ready(function() {
$(".menu").mouseenter(function() {
    $(this).animate({
        color: "#553579"
        }, 100 )
    });
$(".menu").mouseleave(function() {
    $(this).animate({
        color: "#717171"
        }, 100 )
    });

$(".selected").mouseenter(function() {
    $(this).animate({
        color: "#553579"
        }, 100 )
    });
$(".selected").mouseleave(function() {
    $(this).animate({
        color: "#FFFFFF"
        }, 100 )
    });

$("#work").on("click", function() {
    $(this).parent().removeClass("menu");
    $(this).parent().addClass("selected");

    $(this).animate({
        right: "-20px",
        }, 500 );
    $(this).parent().animate({
        color: "FFFFFF"
        }, 500)

    $(".display").load("work.html");

});
})

正如你所看到的，在点击时，该元素也会移动20像素并动画变为#FFFFFF但是一旦鼠标离开，它就会转回＃717171并且即使该类已经确实已经应用了初始鼠标悬停改为.selected。

我使用的是jquery-2.1.4.min.js和jquery.color-2.1.2.min.js

更改jQuery中的元素类并将操作应用于新类

0 个答案: