Question

当鼠标悬停在div元素上时，我有以下JQuery代码将div的背景颜色淡化为不同的颜色。它工作得很好，但它需要jqueryui.js才能工作。我的页面已经将jquery.js用于其他目的，所以我必须加载两个框架。

这只能用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);
});
});

谢谢！

Answer 1

如果你对Jquery UI没问题，那么更好的解决方案就是这个

$(document).ready(function(){
    $("#sample").mouseover(function() {
         $(this).animate({ backgroundColor:'#f00'},1000);
    }).mouseout(function() {
        $(this).animate({ backgroundColor:'#ccc'},1000);
    });       
});

DEMO： http://jsfiddle.net/Starx/KpEMc/1/

Answer 2

有点hacky，但它是我能想到的最好的......

工作示例：http://jsfiddle.net/Damien_at_SF/paDmg/

代码：

<div id="frmLogin">
    <div id="bg"></div>
    <div id="text">BLAH BLAH HAHAHAH</div>
</div>

将鼠标悬停在内容上时淡入'bg'div（这是背景颜色）......

$(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是一个很棒的工具，我肯定会在我的解决方案中使用它...

希望有所帮助：）

JQuery - 在鼠标悬停时淡出颜色

2 个答案: