ホームページ > 記事 > ウェブフロントエンド > マウスが通過したときに表示し、離れるときに非表示にするjqueryを実装する方法
マウスが通過したときに表示し、離れるときに非表示にするjqueryを実装する方法
- 青灯夜游オリジナル
- 2022-04-22 14:35:153353ブラウズ
方法: 1. hover() メソッドを使用してマウス イベントを親要素にバインドし、「親要素.hover (関数の受け渡し、関数の終了)」という構文で 2 つのイベント処理関数を指定します。 . After 関数内で、「child element.show()」を使用して子要素を表示します; 3. Leave 関数内で、「child element.hide()」を使用して子要素を非表示にします。
このチュートリアルの動作環境: 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>
説明:
hover() メソッドは、マウス ポインターが選択された要素上にあるときに実行される 2 つの関数を指定します。 メソッドは、mouseenterイベントとmouseleaveイベントをトリガーします。 注: 関数が 1 つだけ指定されている場合は、mouseenter と Mouseleave の両方がその関数を実行します。 構文:$(selector).hover(inFunction,outFunction)
| 説明 | |
|---|---|
| inFunction | 必須。 MouseEnterイベントが発生したときに実行する関数を指定します。|
| オプション。 Mouseleave イベントが発生したときに実行する関数を指定します。 |
以上がマウスが通過したときに表示し、離れるときに非表示にするjqueryを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ノードをjqueryに置き換える方法次の記事：ノードをjqueryに置き換える方法