jQuery - 具有悬停效果的多个项目

Posted 2023-05-08

【中文标题】jQuery - 具有悬停效果的多个项目

【英文标题】：jQuery - Multiple items with hover effect

【发布时间】：2012-07-14 19:24:00

【问题描述】：

在 CSS 中，我有几个带有悬停效果的 DIV 项目。如果我将鼠标悬停在一个元素上，则该元素具有另一种背景颜色。如果我将鼠标悬停在另一个项目上，则之前选择的项目具有默认背景颜色，而不悬停。

如何使用 jQuery 做到这一点？我想为背景颜色设置动画，但想通过将鼠标悬停在另一个项目上来消除淡入淡出（动画）效果。我尝试使用窗口超时，但在将鼠标指针滑过一些元素后，一切都在闪烁和窃听。

这是我用于鼠标悬停动画效果的代码：

$('.entry').mouseover(function() 
 (this).animate( backgroundColor: "#0F410E" ,  duration: 500, queue: false );
);

jQuery Colors 插件已安装 ;)

【参考方案1】：

你需要做这样的事情：

请弹一下 jsfiddle 的代码，我看一下，试试这个：

我不确定使用queue and duration 的原因是什么，我想你知道:) 因此你正在使用它。

希望对事业有所帮助。

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 );
);

【讨论】：

您必须将项目放入 $() 括号中：$(items)。然后它适用于所有元素。

@thonixx 很高兴它帮助了:) 有趣的是我被否决了大声笑随机:) 哦，确实很好的编辑！

【参考方案2】：

要为元素的background-color 设置动画，因为jQuery 本身不会为颜色设置动画，您应该使用jQuery Color 插件。

这个插件安装了一个cssHook，它允许jQuery的.animate()在两种颜色之间进行动画处理。

【讨论】：

jQuery 颜色插件已安装 ;)