jQuery - hover()

公開日：2018-12-28 更新日：2019-05-14
[jQuery]

1. 概要

マウスが要素内に入った時と、出た時に、任意の処理を実行します。
mouseenter イベントと mouseleave イベントを使っても同じことができます。

$("#main").hover(function(e) {
	処理; //要素内に入った時に実行する処理
}, function(e) {
	処理; //要素外に出た時に実行する処理
});

2. サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body style="padding:0px; margin:0px;">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <div style="padding:20px; padding-top:20px;">
      <div id="main" style="width:100px; height:90px; background-color:lightgray; color:black;">parent
        <div id="child" style="width:50px; height:50px; background-color:gray;">child</div>
      </div>
    </div>
  
    <div id="log" style="padding-left:20px;"></div>
  
    <script>
  
      $("#main").hover(function(e) {
        log(e.target.id + ":要素に入った");
      }, function(e) {
        log(e.target.id + ":要素からはずれた");
      });
  
      //ログ出力
      var no = 1;
      function log(msg) {
        $("#log").append ('<div>' + no++ + ":" + msg + '</div>');
        if ($("#log div").length > 10) $("#log div:first").remove();
      }
  
    </script>
  </body></html>

実行結果：画面



Tag

New Article