0

divをフェードしたいだけです。このコードは、div とその中の書き込みをフェードします。そのため、黒のままにしたいのに、文字が灰色になります。

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

divからh1を取り出すと、次のようになります

"""""""""""""""""""""
|"ここには書き込み禁止"|

"""""""""""""""""""""
私のヘッダーはこちら

しかし、私はこのようにしたい
""""""""""""""""""""
|"My Header Here"|

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

$(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 に答える