問題タブ [mouseout]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
2511 参照

jquery - jquery:クリックイベントを使用してdivを非表示にした後でもマウスアウトイベントが発生する

それが私のコードです。問題は、クリックイベントがトリガーされたときにすべて問題なく、消えますが、マウスを動かした瞬間に再び現れます。問題はマウスアウトイベントがトリガーされていることだと思いましたが、私の人生ではそれを修正する方法がわかりません。何か案は?

0 投票する
1 に答える
219 参照

jquery - Jquery:Pにカーソルを合わせると、divはそのPの中央にフェードインしますが、マウスをそのdivにカーソルを合わせると、マウスアウト効果が発生します

これが私のコードの機能です。#placeBookmarkにクラス.placingがある場合、段落にカーソルを合わせると、#bookmarkThisでフェードインします。#bookmarkThisは、「bookmark this」という単語が含まれる単なるdivです。このdivは、ページが読み込まれるときにページに追加され、ホバーされている段落の中央に配置され、マウスアウトでフェードアウトします。

私の問題/質問:段落にカーソルを合わせると、その段落にフェードインして中央に配置されますが、マウスを#bookmarkThis(フェードインするDiv)の上に移動すると、マウスをオフにしたようにフェードアウトします。段落の。#bookmarkThisが段落ホバーを台無しにしないようにするにはどうすればよいですか?

注:#bookmarkThisは、ページの読み込み時に本文に追加され(Pの子ではありません)、ホバーされているPを基準にして配置されます。

ここに画像の説明を入力してください

0 投票する
5 に答える
4425 参照

jquery - マウスオーバー時にスライドメニューを開いたままにする

インラインJavascriptがロードされている既存のメニューシステムを、jQueryのみを使用して新しいより効率的なコードに変換しようとしています。

ロールオーバー画像のある横棒があります。ページに整数値を含む非表示フィールドがあります。ページが読み込まれると、対応するメニューに「スティッキー」バージョンの画像が読み込まれ、他のすべてのメニュー項目はマウスのEnterとLeaveで画像を交換します。大量のインラインJavascriptと、新しいサイトを作成するたびに変換するのが面倒なモンスターJavascriptファイルがロードされていました。

これをすべてjQueryに正常に変換し、スティッキーメニュー項目のクリックを無効にすることもできました。これで、いくつかの変数を設定するだけで、各サイトのデザインごとに簡単にカスタマイズできます。

うまく機能しています...

今、新しい問題が発生します。1つのデザインには、各メニュー画像の下に多数のスライド式引き出しが含まれています。スライドアニメーションは外部JSファイルによって処理され、メニュードロワー自体はそれぞれコンテナDIV内にネストされたコンテンツを含む単なるDIVです。

そこで、DIVをアニメーション化し、メニュー画像のマウスホバーでスライドインおよびスライドアウトするjQuery用の簡単なものをいくつか作成しました。

問題は、ドロワーを閉じないと、マウスがメニュー画像から離れてメニュードロワーに移動するという問題を解決できないように見えることです。「なぜ?」を理解しています...中に入る前に、アニメーションをトリガーして引き出しを閉じる画像を残しています。ホバーアニメーションをドロワーコンテナに適用すると、メニューの下にゾーンが作成され、アニメーションもトリガーされます。これも必要ありません。jQueryではより複雑な問題になっているようです。これはすべてインラインJavascriptで正常に機能していました...画像を閉じる機能をトリガーせずに、画像から隣接する開いている引き出しにマウスを移動するだけで済みました...引き出しのインライン「マウス入力」がキャンセルされたかのように画像の「マウスリーブ」。

助言がありますか?

ありがとうございました!


編集:

画像からドロワーに渡すときに.stop(true、false)を使用してこれを解決したと思います。これにより、アニメーションが開始する前に停止します。次に、通常のアニメーションを開始する前に画像を入力する場合も同じです...これは、ドロワーを離れて画像を入力することによってトリガーされるアニメーションを停止する効果がありますが、画像を通常どおりに入力する場合も何もしません。さらにテストしてから、サンプルコードを投稿します。


編集#2:

「stop()」と「delay()」を使用してアニメーションを制御していますが、マウスを開くよりも速くマウスを入れることができれば、引き出しの開きをフリーズすることができます。150ミリ秒でインストールされます。しかし、今は問題を誇張するために300ミリ秒に設定しています。

ここに投稿された関連コード...

jsfiddle.net/qPLVp/8/


編集#3:

ニールのおかげで、これは現在非常にうまく機能しています。アニメーションの速度が速くなると、マウスがメニュー画像をオーバーシュートしてドロワーに入る状態が最小限に抑えられます。しかし、それが起こった場合、引き出しは閉じません。これは、マウスの下から閉じるよりもはるかに優れています。

http://jsfiddle.net/elusien/PayFw/8/


編集#4:

再びニールのおかげで、これは同じコードのより効率的なバージョンです...

http://jsfiddle.net/PayFw/9/

0 投票する
2 に答える
12045 参照

jquery - jQuery - 複数の div を使用したマウスオーバー/マウスアウト

大きな div 内にネストされた非表示の div があり、大きな div にマウスを合わせると、非表示の div が下にスライドするように設定します。マウスアウトすると、div がスライドして戻ります。問題は、マウスが小さい div の上に移動すると、mouseout イベントがトリガーされたため、上にスライドさせようとすることです。マウスがどちらの div にも上らないようにするまで、div が再び非表示になるのを防ぐにはどうすればよいですか?

html:

(追加のクラスはモジュラー css システムの一部であり、#topbarVis の幅と高さなどを定義します。

CSS:

js:

0 投票する
1 に答える
286 参照

jquery - スライドショーのマウスアウト効果についてヘルプが必要

一番下のナビゲーションバーからマウスアウトした後、スライドショーをスライドショーの最初のスライドに移動させようとしています。既に pagerEvent を mouseover に変更していますが、最初のスライドにマウスアウトする方法がわかりません。私はjqueryが初めてです。感謝

0 投票する
1 に答える
360 参照

apache-flex - Flex 4では、mouseOutイベントは、サイズ変更後の古いコンポーネントのサイズに基づいてトリガーされますか?これを回避する方法は?

Xというコンポーネントがあります。マウスをその上に置くと、そこからメニューが表示されるようにしようとしています。

コンポーネントの状態を別の状態に変更するmouseOverハンドラーがあり、下部に追加の子コンポーネント(メニュー)が表示されます。もちろん、これによりXコンポーネントが大きくなります。

コンポーネントXを元の状態に戻すことでメニューを非表示にするmouseOutイベントハンドラーもあります。

コンポーネントの上にマウスを移動すると、メニューが期待どおりに表示されます。しかし、現在表示されているメニューにマウスを移動すると、それに触れるとすぐに消えます。このようにメニューに到達することは不可能です。

古い境界から外れるとすぐに、mouseOutイベントがトリガーされると思います。これはそうですか?そして、どうすればそれを回避できますか?新しい境界では、メニューで追加の子を考慮する必要があります。

よろしくお願いします、ヌーノ

0 投票する
1 に答える
1562 参照

javascript - 2 つの div のうちの 1 つのマウスアウトで div を非表示にしますが、その間では非表示にしないでください

私は現在2つ<div>のsを持っています。1 番目をホバリングすると、2 番目がフェードインしますmouseout。1 番目または 2 番目を ing すると、2 番目が再びフェードアウトします。ただし、マウスを 1 番目から 2 番目に移動する場合、2 番目はそのままにしておく必要があります (マウスオーバー メニューのように)。

私が今実装したのは、単純なmouseoverイベントmouseoutハンドラーです: http://jsfiddle.net/tC3ZL/2/

問題は、マウスを最初の div から 2 番目の div に移動するときに 2 番目の div を永続的に表示するという要件が機能しないことです。マウスを最初の div から 2 番目の div に移動するmouseoutと、最初の div が発生します。

このルールをコードに追加するにはどうすればよいでしょうか? http://jsfiddle.net/tC3ZL/1/をやってみました:

ただし、これにより、マウスを最初のdivから2番目のdivに移動すると、2番目のdivがフェードアウトおよびフェードインしますが、効果はありません。

前もって感謝します。