Q&A
ある書籍で
・hover()を第1引数のみ与えて使用すると、マウスオーバー時の処理が実行される
・toggleClass()はセレクタで指定した要素が引数で与えたクラスを持っていなければ、クラスを付加、持っていれば外す
と記載されていました。
そこで、次のようなプログラムを組んでみたところ、マウスオーバー時は予想通りの挙動でしたが、
マウスアウト時には色が元に戻り、与えたクラスが外れていました。
上記の情報からだと、マウスオーバーすることにより、クラスが付加され、マウスアウトしてもクラスは付加されたままだと考えたのですが、
どの部分に誤った理解があるのでしょうか。
自分でも色々調べてみましたが、答えにたどり着けなかったため、ご質問させていただきました。
どうぞよろしくお願いいたします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Test</title> 8 9 <link rel="stylesheet" href="css/style.css"> 10 <script src="js/jquery-2.1.4.min.js"></script> 11 <script src="js/script.js"></script> 12 13</head> 14<body> 15 <h1 id="jsTest" class="red">TEST</h1> 16</body> 17</html>
css
1.red{ 2 color: red; 3} 4 5.pink { 6 color: pink; 7}
jQuery
1$(function(){ 2 $('#jsTest').hover(function(){ 3 $(this).toggleClass('pink'); 4 }); 5});
回答1件
0
ベストアンサー
hover()を第1引数のみ与えて使用すると、マウスオーバー時の処理が実行される
いいえ。マウスオーバーが始まるときと終わるときの両方で呼ばれます。
質問者さんが想定した動作は hover(function() {...}, null)
や mouseenter(function() {...}) です。
公式の hover のドキュメントには引数について「A function to execute when the mouse pointer enters or leaves the element.」と書かれています。
投稿2021/03/19 06:59
編集2021/03/19 07:04
総合スコア21679
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/19 08:19