Jquery 悬停功能并不总是在悬停时被调用

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 悬停功能并不总是在悬停时被调用

Jquery hover function does not always get called on hover over

html

jquery

hover