jqueryfadeto。淡入div和h1_Jquery_Html

jqueryfadeto。淡入div和h1

jquery html

jqueryfadeto。淡入div和h1,jquery,html,Jquery,Html,我只想淡出div。这个代码淡出div和里面的文字。所以文字变成灰色，尽管我希望它保持黑色 <body> <div id="bc"><h1>Welcome Russell!</h1></div> </body> 这就是它的工作原理，当父元素的不透明度为0.5时，它的子元素也会继承该属性。如果要更改DIV元素的背景色，可以使用rgba值和css方法 $(document).ready(function(){

我只想淡出div。这个代码淡出div和里面的文字。所以文字变成灰色，尽管我希望它保持黑色

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

这就是它的工作原理，当父元素的不透明度为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);
}

您还可以包括jQuery UI，它允许您设置属性（如背景色）的动画

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

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

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

显然，你应该改变颜色来更好地适应你。我的示例只是展示了它如何工作的基本原理。

这就是它应该如何工作的，当父元素的不透明度为0.5时，它的子元素也会继承该属性。是的，但是有办法解决这个问题吗？没有什么需要解决的，这是预期的行为。你需要改变你的HTML结构。我已经尝试了第一个，但我正在寻找动画。。。所以第二个是完美的！：）谢谢！：）

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

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