ホームページ > 記事 > ウェブフロントエンド > JavaScriptでのホバーの使い方は何ですか
JavaScriptでのホバーの使い方は何ですか
- WBOYオリジナル
- 2022-01-05 11:51:205630ブラウズ
JavaScript では、 hover() メソッドを使用して、マウス ポインタが選択した要素上にあるときに実行される関数を指定します。ポインタが要素上にあるとき、またはポインタが離れたときに関数を設定できます。 . 関数の場合、構文は「$(要素).hover(inFunction,outFunction)」です。
このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript での hover の使用法とは何ですか
hover() メソッドは、マウス ポインターが選択された要素の上に置かれたときに実行する内容を指定します。 2つの機能。
メソッドは、mouseenterイベントとmouseleaveイベントをトリガーします。
注: 関数が 1 つだけ指定されている場合は、mouseenter と Mouseleave の両方がその関数を実行します。
構文は次のとおりです:
$(selector).hover(inFunction,outFunction)
Call:
$( selector ).hover( handlerIn, handlerOut )
は次と同等です:
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
注: 関数が 1 つだけ指定されている場合、その後、mouseenterイベントとmouseleaveイベントで実行されます。
呼び出し:
$(selector).hover(handlerInOut)
同等:
$( selector ).on( "mouseenter mouseleave", handlerInOut );
例は次のとおりです:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
});
</script>
</head>
<body>
<p>鼠标移动到该段落。</p>
</body>
</html>出力結果:
[関連する推奨事項: JavaScript 学習チュートリアル]
以上がJavaScriptでのホバーの使い方は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。