jquery hoverメソッド

TOPページに戻る > jquery入門

スポンサード リンク

jquery hover()メソッド

hoverメソッドは、セレクタで指定した要素にマウスホバーしたときの処理を実行します
mouseenter()とmouseleave()を同時に実行したいときはhoverメソッドが便利です
functionのつなぎ方がチェーンメソッドとは違うのでカッコには注意してください

$("セレクタ").hover(function(){
	マウスオーバーしたときの処理
},
  function () {
    マウスアウトしたときの処理
  }
);
});

指定したHTML要素をマウスオーバーしたときにイベントを実行する

セレクタで指定したHTML要素にマウスホバーしたときにホバーした要素の内容の最後にテキストを表示します。ホバーが外れるとremoveメソッドで要素を削除します

jquery

$(function() {
  $("#hoge li").hover(
  function () {
    $(this).append($(" ホバーしています"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);
});
css
#hoge{
 border: solid 1px;
 padding: 20px;
  }

html

<ul id="hoge">
<li>li要素</li>
<li>li要素</li>
<li>li要素</li>
<li>li要素</li>
<li>li要素</li>
</ul>

実行後







(C)2012 ホームページ作成無料