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 缺少 #。该颜色可能无法正常工作。