JQuery - 鼠标悬停时淡入淡出颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4612075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery - Fade To Color On Mouse Hover
提问by Damien-Wright
I have the following JQuery code to fade the background color of a div to a different color when the mouse hovers over the div element. It works great but it requires jqueryui.js to work. My pages already use the jquery.js for other purposes, so I have to load both frameworks.
当鼠标悬停在 div 元素上时，我有以下 JQuery 代码将 div 的背景颜色淡化为不同的颜色。它工作得很好，但它需要 jqueryui.js 才能工作。我的页面已经将 jquery.js 用于其他目的，所以我必须加载这两个框架。
Can this be done only with jquery instead of jqueryui?
这只能用jquery而不是jqueryui来完成吗？
<!-- fade page onload -->
$(document).ready(function(){
$('#page_effect').fadeIn(1000);
});
<!-- fade login form to color on hover -->
$(document).ready(function() {
$("#frmLogin").hover(function() {
$(this).stop().animate({ backgroundColor: "#fff"}, 800);
}, function() {
$(this).stop().animate({ backgroundColor: "#e6e6e6" }, 800);
});
});
Thank you!
谢谢！
回答by Starx
If you are OK with Jquery UI, a better solution would be just this
如果您对 Jquery UI 没问题，那么更好的解决方案就是这样
$(document).ready(function(){
$("#sample").mouseover(function() {
$(this).animate({ backgroundColor:'#f00'},1000);
}).mouseout(function() {
$(this).animate({ backgroundColor:'#ccc'},1000);
});
});
回答by Damien-Wright
Little bit hacky, but its the best I could come up with...
有点hacky，但它是我能想出的最好的......
Working example: http://jsfiddle.net/Damien_at_SF/paDmg/
工作示例：http: //jsfiddle.net/Damien_at_SF/paDmg/
Code:
代码：
<div id="frmLogin">
<div id="bg"></div>
<div id="text">BLAH BLAH HAHAHAH</div>
</div>
Fade in the 'bg' div (which is the background colour) when hovering over the content...
将鼠标悬停在内容上时淡入 'bg' div（这是背景颜色）...
$(document).ready(function(){
$("#text").hover(
function() {
$("#bg").stop().fadeOut();
},
function() {
$("#bg").stop().fadeIn();
});
});
CSS for positioning:
用于定位的 CSS：
#frmLogin {
position:relative;
height:400px;
width:800px;
}
#bg{
position:absolute;
width:100%;
height:100%;
border:1px solid black;
background:#e6e6e6;
}
#text {
background:transparent;
position:absolute;
width:100%;
height:100%;
border:1px solid black;
}
jQueryUI is an awesome tool, I'd definitely use it over my solution...
jQueryUI 是一个很棒的工具，我肯定会在我的解决方案中使用它......
Hope that helps :)
希望有帮助:)
