Q

更改与jQuery悬停的背景

2011-04-27 93 views 0 likes

0

我试图找出一个简单的jQuery代码将在悬停时淡入淡出rgba背景颜色，然后在将鼠标从div移开时淡出。更改与jQuery悬停的背景

我说“rgba”的原因是因为它需要70％不透明的黑色，但如果可以用jQuery自己的不透明度完成，那很酷。

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

感谢，韦德

2011-04-27 Wade D Ouellet

A

回答

5

你在这里

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

你需要包括jQuery的用户界面或获取更多信息color plugin

退房this thread

2011-04-27 04:35:42 samccone

+0

嗯这一个，下面不工作，我已经包括了色彩插件之一：http://vls.thewestharbour.com是WIP演示现场 – 2011-04-27 04:47:53

+0

好了，事实上，我现在去，但我想知道是否有办法让背景不透明，而不是文字。 – 2011-04-27 04:50:44

+0

http://imgur.com/7WSEm看起来像你在JS中有一些错误... – samccone 2011-04-27 04:51:04

0

该死打我到冲，我会尽我所能 http://jsfiddle.net/mazzzzz/Wfech/

2011-04-27 04:41:54 Ben

+0

抱歉，:)但惊人的有多少种不同的解决方案有这样一个简单的问题，我发现，检查它是否是动画是必须的，因为如果你真的快速滑过和关闭，你可以创建一个闪烁的效果 – samccone 2011-04-27 04:43:47

+0

哈哈，不用担心（答案很好） – Ben 2011-04-27 04:45:01

1

编辑：所有你需要的是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的不透明度，则不透明度也会影响内容。

2011-04-27 04:44:32 wdm

+0

当页面第一次加载时，有一个奇怪的小bug ...背景闪烁然后消失。 – Hristo 2011-04-27 04:50:04

+0

稍微修改了代码。现在，背景颜色最初由CSS隐藏。 – wdm 2011-04-27 05:02:19

+0

干得好！我喜欢它:) – Hristo 2011-04-27 05:03:32

0

我认为你使用下面的代码没有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>

2011-04-27 04:47:53

+0

用户希望使用jQuery – Hristo 2011-04-27 04:49:14

相关问题