.hover()

要素にマウスポインターが乗った時と乗った状態から離れた時のイベントにバインドします。

$(selector).hover(handlerIn, handlerOut)とした場合、これは $(selector).mouseenter(handlerIn).mouseleave(handlerOut)のショートカットになります。

.hover( handlerIn(eventObject), handlerOut(eventObject) ) 1.0追加

戻り値:jQuery

引数 説明
handlerIn(eventObject) マウスポインタが対象要素に入ってきた際に、実行したい処理を関数として指定します。
handlerOut(eventObject) マウスポインタが対象要素から出ていった際に、実行したい処理を関数として指定します。

サンプル

リスト項目にマウスが乗ると末尾に記号が表示され、離れると非表示になります。

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <ul>
    <li>ミルク</li>
    <li>パン</li>
    <li class='fade'>ポテトチップス</li>
    <li class='fade'>サラダ</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);
//fadeクラスを持つLI要素の場合
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM