0

mouseenter要素Yに要素Xを表示し、要素Yに非表示にしようとしていmouseleaveます。

これまでのところ、問題なく動作します。

それに加えて、要素Xにカーソルを合わせた後、開いたままにしておく必要があります。
要素Xからホバリングした後、非表示にする必要があります。

コードのどこに問題があるのか​​を見つけるのを手伝ってもらえますか？
（私はjquery 1.3.2を使用しています）

$(document).ready(function () {
    $('.kukuk').mouseenter(showBox).mouseleave(hideBox);

    function showBox(e) {
        $('.kuk-blok').fadeIn().css(({
            left: 0,
            top: 30
        }));
    }

    function hideBox() {
        $('.kuk-blok').fadeOut();
    }

    $(".kuk-blok").hover(function () {
        $(this).css('display:block');
    }, function () {
        $(this).css('display:none');
    });
});
4

2 に答える 2

2

実際のHTMLが表示されない場合、スクリプトが最も明白な問題に関連しているのは、css（）メソッドの使用であるように思われます。

このcss()メソッドは、値を設定するために2つの引数を取ります。

$(".kuk-blok").hover(function () {
    //$(this).css('display:block');
    $(this).css('display', 'block');
}, function () {
    //$(this).css('display:none');
    $(this).css('display', 'none');
});

または、使用することもできます。必要show()に応じて、次のhide()ようにします。

$(".kuk-blok").hover(function () {
    //$(this).css('display:block');
    $(this).show();
}, function () {
    //$(this).css('display:none');
    $(this).hide();
});
于 2013-02-04T23:38:34.557 に答える
0

「開いたまま」の部分については、hover（）とdelay（）を組み合わせて使用​​します。

マウスがelementXを離れるとき、elementYの非表示を遅らせます。これにより、マウスを非表示にする前にelementYに移動するのに十分な時間が与えられます。マウスがelementYに入ると、その非表示のアニメーションはキャンセルされ、表示されたままになります。マウスがelementYを離れると、マウスは非表示になります。

$('#elementX').hover(
  function() { $('#elementY').stop(true,true).fadeIn('fast'); },
  function() { $('#elementY').stop(true,true).delay(350).fadeOut('fast'); }
);

$('#elementY').hover(
  function() { $(this).stop(true,true).show(0); },
  function() { $(this).stop(true,true).delay(150).fadeOut('fast'); }
);

これがjFiddleです。

于 2013-02-04T23:52:43.213 に答える