0

マウスが入ると不透明度1に、マウスが出るときに0.5にフェードするようにします。これは私のコードです：

        <script>
    $(document).ready(function(){
        $("#header").mouseenter(function(){
        $("#header").fadeTo('fast', 1);
        });
        $("#header").mouseleave(function(){
            $("#header").fadeTo('fast', 0.5);
    });

    }


    </script>

HTML：

<body>

        <div id="header">
            <h1>Hello!</h1>
            <p>blah blah...</p>
        </div>

</body>

1つのh1と1つのpを含むdivが本体にあります。マウスをその上に移動しても何も起こりません。何か間違えている？

4

2 に答える 2

1

間違ったインデントは構文エラーを隠します：

$(document).ready(function(){
    $("#header").mouseenter(function(){
        $("#header").fadeTo('fast', 1);
    });
    $("#header").mouseleave(function(){
        $("#header").fadeTo('fast', 0.5);
    });
}); // <= missing parenthesis

それ以外は動作します。0.5は、すべての色の組み合わせで実際には透明ではないことに注意してください。

于 2013-03-23T21:29:09.047 に答える
0

cssはどうですか？

#header {
  opacity: .5;
  transition: opacity .3s ease-in-out;
}
#header:hover {
  opacity: 1;
}

必ずすべてのcssベンダープレフィックスを追加してください。これは、jQueryIMOを使用するよりも優れています。ブラウザがサポートしていないtransitionかopacity、大したことではない場合、それが「グレースフルデグラデーション」のすべてです。

于 2013-03-23T21:29:12.790 に答える