jQuery-淡入淡出鼠标悬停时的颜色 [英] JQuery - Fade To Color On Mouse Hover
问题描述
我有以下JQuery代码,当鼠标悬停在div元素上时,可以将div的背景色淡化为其他颜色.它工作得很好,但是需要jqueryui.js才能工作.我的页面已经将jquery.js用于其他目的,因此我必须加载两个框架.
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.
可以仅使用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);
});
});
谢谢!
推荐答案
有点hacky,但是我能想到的最好的方法...
Little bit hacky, but its the best I could come up with...
工作示例: http://jsfiddle.net/Damien_at_SF/paDmg/
代码:
<div id="frmLogin">
<div id="bg"></div>
<div id="text">BLAH BLAH HAHAHAH</div>
</div>
将鼠标悬停在内容上时,淡入"bg" div(背景颜色)...
Fade in the 'bg' div (which is the background colour) when hovering over the content...
$(document).ready(function(){
$("#text").hover(
function() {
$("#bg").stop().fadeOut();
},
function() {
$("#bg").stop().fadeIn();
});
});
用于定位的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是一个很棒的工具,我肯定会在解决方案中使用它...
jQueryUI is an awesome tool, I'd definitely use it over my solution...
希望有帮助:)
这篇关于jQuery-淡入淡出鼠标悬停时的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!