使用 jQuery 更改悬停背景答案

【问题标题】：Change Background on hover with jQuery使用 jQuery 更改悬停背景
【发布时间】：2011-04-27 04:21:33
【问题描述】：

我试图弄清楚一个简单的 jQuery 代码在悬停时淡入 rgba 背景颜色，然后在您将鼠标移出 div 时淡出。

我之所以说“rgba”是因为它需要 70% 不透明的黑色，但如果这可以通过 jQuery 自己的不透明度来完成，那就太酷了。

一个完美的例子是http://dalhov.se，只是他们使用了一种我很难学习的更复杂的方法。

谢谢，韦德

【问题讨论】：

标签： jquery css hover fade

【解决方案1】：

你来了

http://jsfiddle.net/samccone/EpmKC/

您需要包含 jquery UI 或 color plugin

查看this thread 了解更多信息

【讨论】：

嗯，这个和下面那个不行，我已经包含了颜色插件：vls.thewestharbour.com是WIP演示站点
好的，我现在真的开始了，但我想知道是否有办法让背景不透明而不是文本。
@Wade...您希望该页面上的哪些元素出现这种效果？
只是 #content 背景颜色，div 内没有任何内容（只有 div 本身）。我希望没有背景，然后在悬停时淡入 70% 黑色背景，然后在鼠标关闭时淡出到无背景。
我应该分层两个单独的 div（一个用于背景，一个用于内容）还是有更干净的 jquery 修复？编辑：实际上这是行不通的，因为它仍然会使另一个 div 内的 div 淡化（而且我不能绝对定位，因为每个页面的高度都不同）

【解决方案2】：

编辑：您所需要的只是 jQuery 的 fadeTo 函数...

演示：http://jsfiddle.net/wdm954/5Hef6/5/

我相信这与您的示例网址最相似。

$('#bg').fadeTo(1, 0);
$('#content').hover(function() {
    $('#bg').stop().fadeTo(300, 0.7);  
}, function() {
    $('#bg').stop().fadeTo(300, 0);
});

在这个演示中，DIV 是分层的。如果您删除包含内容的 DIV 的不透明度，您的不透明度也会影响内容。

【讨论】：

页面第一次加载的时候，有一个奇怪的小bug……背景一闪一闪又消失了。
稍微修改了代码。现在背景颜色最初被 css 隐藏了。

【解决方案3】：

该死的打了我一拳，但无论如何我都会扔掉我的 http://jsfiddle.net/mazzzzz/Wfech/

【讨论】：

对此很抱歉 :) 但令人惊讶的是，对于这样一个简单的问题有多少不同的解决方案，我发现检查它是否是动画是必须的，因为如果你可以创建闪烁效果鼠标上下移动真的很快

【解决方案4】：

我认为您在没有 JQuery 的情况下使用以下代码。

In style

#divDemo{background-color:#FF0000;height:50px;width:200px;}
#divDemo:hover{background-color:#DDDDDD;height:50px;width:200px;}

In HTML

<div id="divDemo"></div>

【讨论】：