4

次の効果を作成しようとしています。リンクにカーソルを合わせると、そのリンクの色が変わります。この部分は機能しますが、コードに問題があるのは、カーソルを合わせるとテキストが表示されないことです。スパンとアンカータグに画像を追加することでこれを解決できることと、色をアニメーション化するプラグインがあることも知っていますが、可能であれば、背景画像とプラグインなしでこれを解決したいと思います。それは可能ですか？ 私はあなたが私の問題を見るためにこのFIDDLE
を作成しました。

私のコード：

$(document).ready(function () {
    $('.link').hover(function () {
        var heightCheck = $(this).outerHeight();
        //alert(heightCheck);
        $(this).stop().animate({
            opacity: 0
        }, 1000);
        $('.yellow').height(heightCheck);
        $('.yellow').css({
            'margin-top': -heightCheck
        });
    }, function (heightCheck) {
        $(this).stop().animate({
            opacity: 1
        }, 1000, function () {
            $('.yellow').css({
                'margin-top': +heightCheck
            });
        });
    });
});
4

4 に答える 4

3

さて、あなたはすでにjQueryを使用しています。なぜ、jQuery UI（参照するプラグイン）を使用して、1つの要素ですべてを実行してみませんか。

考えてみて.yellowください。そのようなリンクが必要になるたびに、その余分なスパンを含めることを忘れないでください。

また、プログレッシブエンハンスメントを使用して、これをすべてCSSで実行してみませんか？IEのjQueryフォールバックを実行することもできますか？

添付のフィドルを参照してください。

http://jsfiddle.net/nzcGy/3/

于 2012-07-03T07:24:38.287 に答える
1

この結果を得るために不透明度を試してみましたが、 http：//jsfiddle.net/kyWth/37/リンクの不透明度とスパンの不透明度の両方が0.5に設定されているため、見栄えがよくなりました。それはあなたが望むものに近いですか？

更新ここhttp://jsfiddle.net/kyWth/39/でコードに変更を加えました。完璧に機能し、スパンも必要ありません。

于 2012-07-03T07:25:48.437 に答える
1

ここであなたが達成しようとしていることを理解していれば、これは1行のCSSで解決されるように見えます。例えば..

.link:hover { background-color: yellow;}

テキストが表示されない理由は、不透明度の原因です。0を指定すると、テキストが非表示になります。

于 2012-07-03T07:05:28.010 に答える
1

リンク自体ではなく、灰色の背景色がliスタイルに適用されるように変更します。.linkのアニメート不透明度ラインも削除します。

多分このようなもの？http://jsfiddle.net/5bXHW/

于 2012-07-03T07:21:15.947 に答える