3

http://www.thedana.com/で「利用可能かどうかを確認」ボタンで見られるものに似たものをデザインしたいと思います。 : http://quaaoutlodge.com/drupal-7.14/ ([今すぐ予約] タブ)。お気づきのように、非常に扱いやすく、フェードアウトすべきでない場合 (カーソルがまだフィールドの中央にある場合) にフェードアウトすることがあります。

ありがとう！ロン

更新：それを実装しようとしましたが、「本」にカーソルを合わせると「フェード」divを表示し、カーソルが「フェード」の上に移動するときにそれを維持したいので、うまくいきません? URL:http://quaaoutlodge.com/drupal-7.14/

4

2 に答える 2

1

div#fadeの中に入れるdiv#bookと、問題の半分が解決します。この変更に合わせて CSS も調整する必要があります。

学習者にとってもう 1 つの非常に重要なポイントは、jQuery が目立たないクロスブラウザー イベント リスナーのアタッチを提供することです。つまり、HTML 内のインライン JS は、onmouseenter="handler()"不必要で技術的に醜いだけでなく (構造と動作が混在している)、グローバル スコープを関数名で汚染します。

これが、人々が W3School に対して広告を出す理由の 1 つです。

しかし、トピックに戻ると、DOM Ready ハンドラーとホバーハンドラーを使用したソリューションがあります。

フィドル

HTML

<div id="book">
    <a href="/drupal-7.14//?q=book">Book Now</a>
    <div id="fade">TEST</div>
</div>​

JS

​$(function() {
    var fade = $('#fade');
    $('#book').hover(function() {
        fade.fadeIn();
    }, function() {
        fade.fadeOut();
    });
});

繰り返しますが、CSSposition:absoluteから と のマージンを削除して作り直す必要があります#fade。

于 2012-10-06T05:31:10.623 に答える
0

一般的な onmouseout の代わりに、jquery の .mouseleave を試すことはできますか?

http://api.jquery.com/mouseleave/

「mouseleave イベントは、イベント バブリングを処理する方法で mouseout とは異なります。この例で mouseout が使用された場合、マウス ポインターが内部要素の外に移動すると、ハンドラーがトリガーされます。これは通常、望ましくない動作です。mouseleave イベント一方、マウスが子孫ではなく、バインドされている要素を離れたときにのみハンドラーをトリガーします。したがって、この例では、マウスが外側の要素を離れたときにハンドラーがトリガーされますが、内側の要素ではトリガーされません。

于 2012-10-06T05:11:21.767 に答える