我在 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 状态?也许所有这些都有些矫枉过正,我应该尝试不同的方法?
谢谢!
最佳答案
您需要在鼠标退出 元素时将状态更改回默认值。 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 ?
关于javascript - 使用 jQuery 对某些元素的 css 属性进行颜色循环,:hover gets stuck and erratic,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19266972/