jquery在悬停时淡入背景颜色属性？

Posted 2023-05-08

【中文标题】jquery在悬停时淡入背景颜色属性？

【英文标题】：jquery fading in background color property on hover?

【发布时间】：2012-01-27 13:59:47

【问题描述】：

我有一小段代码不工作，看看：

$(document).ready(function() 
    $('ul#mainmenu li:hover').css(backgroundColor:'');
    $('ul#mainmenu li').hover(function() 
        $(this).animate(backgroundColor:'#2E8AE5', slow);
    );
);

它的意思是：

1) 在 ID 为 mainmenu 的无序列表中，从具有伪类 :hover 的列表项中取消设置 CSS 属性 background-color（这样那些没有启用 javascript 的人仍然可以体验到与我类似的效果'正在尝试用 jQuery 来实现）

2) 当相同的列表项被悬停在上面时，它应该以所述列表项的背景色进行动画处理。

但事实并非如此。相反，第一个任务甚至都没有完成，更不用说在悬停时在后台制作动画了。值得注意的是，我已经三次检查了我的元素（我什至将它们复制并粘贴到脚本中以确保）。

我正在使用 jQuery UI——据我所知，它可以执行涉及为某些 CSS 属性设置动画的任务。想法？

【参考方案1】：

作为mentioned before ...使用颜色插件

http://jsfiddle.net/Mb6Nd/

$(document).ready(function() 
    var lis = $('#mainmenu > li');
    $(lis).hover(
        function() 
            $(this).animate(backgroundColor:'#2E8AE5', 'slow');
        ,
        function()
            $(this).animate(backgroundColor:'#cecece', 'fast');
        
    );
);

【讨论】：

效果很好，除了我的起始颜色是透明的，而且这不适用于透明的起始颜色，而且它会影响子元素（子菜单） - 真的，这不是什么我在找。

【参考方案2】：

将您的目标 id 更改为 #mainmenu > li 将使其仅影响父级 li 而不会影响子级 li。也可以试试 backgroundColor: 'transparent !important'

试试这个：

$(document).ready(function() 
    var $lis=$('#mainmenu > li');
    $lis.css(backgroundColor:'transparent !important');
    $lis.hover(function() 
       $(this).animate(backgroundColor:'#2E8AE5', 'slow');
    );
);

【参考方案3】：

编辑

它应该是“背景色”。不是背景颜色。即

$(this).animate('background-color':'#2E8AE5', "slow");

---

速度参数应该是字符串或数字。例如：“慢”或 10000（毫秒）。

例如：

$(this).animate(backgroundColor:'#2E8AE5', "slow");

或

$(this).animate(backgroundColor:'#2E8AE5', 1000); // in millisecs

【讨论】：

啊，已经很晚了 - 我应该把它捡起来，但它并不能解决我的问题。

backgroundColor 是 jQuery 中的一个有效 CSS 属性，正如 Tim 的回答所证明的那样，遗憾的是，这并不能解决我的问题。

【参考方案4】：

这行得通吗？：

$(document).ready(function() 
    var $lis=$('#mainmenu li');
    $lis.css(backgroundColor:'#aaa');
    $lis.hover(function() 
       $(this).animate(backgroundColor:'#2E8AE5', 'slow');
    );
);

【讨论】：

实际上，我只是将第一个背景颜色设置为 #AAA 而不是空白，然后重试了它！ :D 但是有什么方法可以让我最初将background-color 设置为空，因为必须将其设置为预设颜色会破坏鼠标悬停之前的外观？干杯。

此外，它也会影响此菜单中的子菜单。有没有办法将动画仅应用于该特定元素，而不是继承它的子元素？

@Antilogical13 你可以使用background-color:inherit;

【参考方案5】：

我认为使用color animation jQuery plugin之类的插件淡化背景色、前景色和边框颜色是最好的解决方案，

使用：

（去掉反斜杠）.

然后输入之前的代码。喜欢。

$('#demodiv').animate(backgroundColor: '#400101');

更多参考click here