Question

我有一个jquery悬停问题，由于某些原因，在我的情况下，每次将鼠标悬停在li上时，并不总是会调用悬停函数。

这里我有一个导航

<div id="nav">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Blog</a></li>
    </ul>
</div>

当我将鼠标悬停在li上时，我想更改悬停li的背景颜色。

这是我的jquery函数

var colorArray = [ "#2E8B57", "#008080", "#FF4500", "#FF7F50", "#C71585", "#FFD700", "#FF1493", "D7578B" ];
$("#nav ul li").hover(function(event){
    var rand = Math.floor((Math.random() * 8));
        $(this).css({
            "background-color": colorArray[rand],
            WebkitTransition: 'background-color 500ms linear',
            MozTransition: 'background-color 500ms linear',
            OTransition: 'background-color 500ms linear',
            MsTransition: 'background-color 500ms linear',
            transition: 'background-color 500ms linear'
        });
    },function(){
    $(this).css({
            "background-color": '#FFFFFF',
            WebkitTransition: 'background-color 500ms linear',
            MozTransition: 'background-color 500ms linear',
            OTransition: 'background-color 500ms linear',
            MsTransition: 'background-color 500ms linear',
            transition: 'background-color 500ms linear'
     });
});

大部分时间都可以使用，但由于某种原因，有时候li的背景颜色不会改变。

请参阅jsfiddle here

Answer 1

您的上一个颜色D7578B错过了#。该颜色可能无法正常工作。

Answer 2

你可以尝试这个：

var colorArray = [ "#2E8B57", "#008080", "#FF4500", "#FF7F50", "#C71585", "#FFD700", "#FF1493", "#D7578B" ];
$("#nav ul li").hover(function(event){
    var rand = Math.floor((Math.random() * 8));
        $(this).css({
            "background-color": colorArray[rand],
            WebkitTransition: 'background-color 500ms linear',
            MozTransition: 'background-color 500ms linear',
            OTransition: 'background-color 500ms linear',
            MsTransition: 'background-color 500ms linear',
            transition: 'background-color 500ms linear'
        });
    },function(){
    $(this).css({
            "background-color": '#FFFFFF',
            WebkitTransition: 'background-color 500ms linear',
            MozTransition: 'background-color 500ms linear',
            OTransition: 'background-color 500ms linear',
            MsTransition: 'background-color 500ms linear',
            transition: 'background-color 500ms linear'
        });

    });

HERE MY DEMO

悬停时，并不总是调用Jquery悬停函数

2 个答案: