Question

我想淡化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);
});

Answer 1

这是它应该如何工作，当父元素的不透明度为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/

Answer 2

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

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

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

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

http://jsfiddle.net/BrN4t/

显然，您应该更改颜色以更改为更适合您。我的例子只展示了它的工作原理。

jQuery fadeTo。淡化div和h1

2 个答案: