在 CSS 中,我有几个带有悬停效果的 DIV 元素。如果我将鼠标悬停在一个元素上,则该元素具有另一种背景颜色。如果我将鼠标悬停在另一个元素上,则前一个选定的元素将具有默认背景颜色,而无需悬停。
如何使用 jQuery 做到这一点?我想要为背景颜色设置动画,但希望通过将鼠标悬停在另一个元素上来消失淡入淡出(动画)效果。我尝试使用窗口超时,但将鼠标指针滑过几个元素后,所有内容都在闪烁和出错。
这是我用于鼠标悬停时的动画效果的代码:
$('.entry').mouseover(function() {
(this).animate({ backgroundColor: "#0F410E" }, { duration: 500, queue: false });
});
jQuery Colors 插件已安装;)
最佳答案
你需要做这样的事情:
请轻弹 jsfiddle 的代码,我会看一下,但试试这个:
我不确定使用队列和持续时间
的原因是什么,我认为您知道:)
因此您正在使用它。
希望它对事业有所帮助。
var items = '.entry'
$(items).hover(function() {
// Mouseover state
$(this).animate({ backgroundColor: "#0F410E" }, { duration: 500, queue: false });
}, function() {
// Mouseout state
$(this).animate({ backgroundColor: "black" }, { duration: 500, queue: false });
});
关于jQuery - 具有悬停效果的多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11495967/