javascript - 使用 jQuery 对某些元素的 css 属性进行颜色循环，:hover gets stuck and erratic

Question

我在 jQuery 和 this little plugin 的帮助下通过一些元素的颜色、背景颜色和边框颜色 css 属性进行颜色循环。 .

我这样做:

var currentColor = myRandNumber; // I get this variable from the main page
var myWebColors = [ '#49aea2', '#5da270', '#a1b144', '#ceb33d', '#ce812d',
'#c44e4e', '#ac4275', '#705f91', '#4d6791', '#5199a4' ];

window.setInterval( animateColor, 2000 ); // not using requestAnimationFrame
                                          // for browser compatibility

function animateColor() {

    $(".new-project-header, .button a:active,
    #logo, ul#menu-main-nav li a:active, ul#menu-main-nav li.contact a,
    ul#menu-main-nav li.contact a:visited, .footer-twitter,
    .footer-mail").animate(
        {
            backgroundColor: myWebColors[currentColor]
        }, "slow");

    $("a:hover, p a:hover, ul#menu-main-nav li.contact a:hover,
    h3.portfolio-item-title a:hover").animate(
        {
            color: myWebColors[currentColor]
        }, "slow");

    $("p a, p a:visited").animate(
        {
            borderColor: myWebColors[currentColor]
        }, "slow");

    if (currentColor == 9) { // the following cycles through the array
                             // in an endless loop
        currentColor = 0;
    } else {
        currentColor++;
    }
}

编辑: jsfiddle HERE !

我遇到的问题是，当我将鼠标悬停在 p a 上时，虽然 jQuery 可以很好地进行颜色循环，但是一旦我鼠标移出，链接将保持其 :hover 状态，并显示最新的它循环成的颜色。

当我将鼠标悬停在 ul#menu-main-nav li 上时，情况更糟。它会改变 a:hover color，当它只应用于 ul#menu-main-nav li.contact 时。这就像后一个选择器:悬停状态优先于前者的 css。

也许我应该用 on 事件手动完成所有事情？也许我应该在每个循环步骤结束时“重置”所有非 :hover 状态？也许所有这些都有些矫枉过正，我应该尝试不同的方法？

谢谢!

Answer 1

您需要在鼠标退出 元素时将状态更改回默认值。 IE。悬停完成。

JQuery hover 可以轻松做到这一点。

$( "a" ).hover(
  function() {
    $( this ).animate({  color: myWebColors[currentColor] }, "slow");
  }, function() {
        $( this ).animate({  color: default_color }, "slow");
  }
);

出于好奇，您为什么不使用此处解释的 CSS:hover 属性 http://www.w3schools.com/cssref/sel_hover.asp ？