Question

有人可以指出我做错了什么吗？我只是想在悬停时淡化按钮的背景颜色（ID为＃34;菜单按钮＆＃34;）。

JS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script language="javascript" type="text/javascript">

 if($('menu-button').is(':hover')) {
    $( this ).animate({
    backgroundColor: "#666"
 })} else {
    $( this ).animate({
    backgroundColor: "#FFF"
 })};

</script>

Answer 1

您应该使用.on()

$("#menu-button").on({
    mouseenter: function () {
        $(this).animate({backgroundColor: "#666"});
    },
    mouseleave: function () {
        $(this).animate({backgroundColor: "#FFF"});
    }
});

或者，这也可以使用纯CSS3

完成

#menu-button {
    background-color: #FFF;
}

#menu-button:hover {
    background-color: #666;
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

Answer 2

$(document).ready( function(){
    $('.menu-button').hover( function() {
        $( this ).animate({ backgroundColor: "#666" });
    }, function(){
        $( this ).animate({ backgroundColor: "#FFF" });
    });
});

如果是（＆＃39;：hover＆＃39;）动画背景颜色不起作用

2 个答案: