Question

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

如何使用jQuery执行此操作？我想为背景颜色设置动画，但希望在悬停在另一个项目上时消除淡入淡出（动画）效果。我尝试了窗口超时但是在将鼠标指针滑过几个元素之后，一切都在闪烁和窃听。

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

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

安装了jQuery Colors插件;）

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

Answer 2

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

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

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

2 个答案: