当前位置：文江博客话题详情

使用 jQuery 更改悬停时的背景

发布于 2024-11-03 16:26:06 字数 255 浏览 1 评论 0原文

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

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

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

谢谢，韦德

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉薄对峙 2024-11-10 16:26:06

在这里

你

需要包含 jquery UI或颜色插件

查看此帖子了解更多信息

回复收藏 0 原文

故事未完 2024-11-10 16:26:06

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

EDIT: All you need is jQuery's fadeTo function...

Demo: http://jsfiddle.net/wdm954/5Hef6/5/

I believe this is most similar to your example url.

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

In this demo the DIVs are layered. If you drop the opacity of a DIV that contains content your opacity will effect the content also.

回复收藏 0 原文

七七 2024-11-10 16:26:06

该死的，先发制人，但无论如何我都会把我的扔掉
http://jsfiddle.net/mazzzzz/Wfech/

回复收藏 0 原文

七颜 2024-11-10 16:26:06

我认为您使用下面的代码而不使用 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>

I think you use below code without 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>

回复收藏 0 原文

~没有更多了~