0

我只想淡化 div。这段代码淡化了 div 和其中的文字。因此，即使我希望它保持黑色，文字也会变灰。

<body>
    <div id="bc"><h1>Welcome Russell!</h1></div>
</body>

如果我将 h1 从 div 中取出，它将看起来像

"""""""""""""""""""""""
|"这里不写"|

"""""""""""""""""""""""
我的标题在这里

但我希望它像这样
"""""""""""""""""""""""
|"我的标题在这里"|

"""""""""""""""""""""""

$(document).ready(function(){
    $("div").mouseover(function(){
        $("#bc").fadeTo("slow", 0.5);
});
    $("div").mouseout(function(){
        $("#bc").fadeTo("slow", 1);
});
4

2 回答 2

2

这就是它的工作方式，当父元素的不透明度为 0.5 时，它的后代也会继承该属性。如果要更改 DIV 元素的背景颜色，可以使用rgba值和css方法。

$(document).ready(function(){
    $("div").mouseenter(function(){
        $(this).css("background-color", 'rgba(0,0,0, 0.5)');
    }).mouseleave(function(){
        $(this).css("background-color", 'rgba(0,0,0, 1)');
    });
});

注意：如果你想为元素的背景颜色设置动画，你应该加载 jQuery UI。

您还可以使用 CSS3 过渡属性：

div {
    background-color: rgba(0,0,0,1);
    color: white;
    -moz-transition: .5s background-color;
    -webkit-transition: .5s background-color;
    -o-transition: .5s background-color;
    transition: .5s background-color;
}
div:hover {
    background-color: rgba(0,0,0,0.5);
}

http://jsfiddle.net/vyBgW/

于 2013-03-09T15:12:38.833 回答
0

您还可以包含 jQuery UI，它可以让您为背景颜色等属性设置动画。

然后，您的代码可能如下所示：-

$(document).ready(function(){
    $("div").mouseover(function(){
        $("#bc").animate({backgroundColor: "Red"});

});
    $("div").mouseout(function(){
        $("#bc").animate({backgroundColor: "Gray"});
});
});

http://jsfiddle.net/BrN4t/

显然，您应该更改颜色以更改为更适合您。我的例子只是展示了它是如何工作的基础知识。

于 2013-03-09T15:15:15.057 回答