マウスが通過したときに表示し、離れるときに非表示にするjqueryを実装する方法-フロントエンドQ&A-php.cn

マウスが通過したときに表示し、離れるときに非表示にするjqueryを実装する方法

青灯夜游

リリース： 2022-04-22 14:35:15

オリジナル

3367 人が閲覧しました

方法: 1. hover() メソッドを使用してマウスイベントを親要素にバインドし、「親要素.hover (関数の受け渡し、関数の終了)」という構文で 2 つのイベント処理関数を指定します。 . After 関数内で、「child element.show()」を使用して子要素を表示します; 3. Leave 関数内で、「child element.hide()」を使用して子要素を非表示にします。

マウスが通過したときに表示し、離れるときに非表示にするjqueryを実装する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

#jquery は非表示効果を残したマウス通過表示を実現します

実装方法:

hover () メソッドを使用して、マウスイベントを親要素にバインドし、2 つのイベント処理関数 (表示を渡す関数と非表示のままにする関数) を指定します。
引き渡す関数では、show( ) 子要素を表示します
leaving 関数で、hide() を使用して子要素を非表示にします

実装例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			div{
				border: 1px solid red;
				height: 100px; 
				 
			}
			p{
				background-color: pink;
				display: none;
			}
		</style>
		<script>
			$(function() {
				$("div").hover(function() {
					$("p").show();
				}, function() {
					$("p").hide();
				});
			})
		</script>
	</head>
	<body>
		<div>
			<p>
				p元素，默认是隐藏的，当鼠标经过时显示，离开时隐藏
			</p>
		</div>
		<br>
		<span>使用鼠标悬停div元素</span>
	</body>
</html>

ログイン後にコピー

マウスが通過したときに表示し、離れるときに非表示にするjqueryを実装する方法

説明:

hover() メソッドは、マウスポインターが選択された要素上にあるときに実行される 2 つの関数を指定します。

メソッドは、mouseenterイベントとmouseleaveイベントをトリガーします。

注: 関数が 1 つだけ指定されている場合は、mouseenter と Mouseleave の両方がその関数を実行します。

構文:

$(selector).hover(inFunction,outFunction)

ログイン後にコピー

パラメータ説明必須。 MouseEnterイベントが発生したときに実行する関数を指定します。 #outFunction[推奨学習:


inFunction
オプション。 Mouseleave イベントが発生したときに実行する関数を指定します。

jQuery ビデオチュートリアル

、Web フロントエンドビデオ ]

以上がマウスが通過したときに表示し、離れるときに非表示にするjqueryを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。