jQuery 「イベント」マウスカーソルの出入りに応じ、それぞれの処理を実行する

.hover()メソッドは、.mouseenter()と.mouseleave()を1つの書式にまとめたものです。.on()メソッドで「.on(‘hover’…)」と記述することはできませんので、hoverをonで書きたい時はmouseenterとmouseleaveを使います。

書式

$(対象要素).hover(function(e){入る処理},function(e){出る処理})
$(対象要素).hover(function(e){出入共通の処理})

$('p').hover(function(e){
  alert('mouse in');
},
function(e){
  alert('mouse out');
});

サンプル

.hover()メソッドでマウスの出入りを検出する

<html>
      <head>
        <meta charset="UTF-8">
        <title>テストページ</title>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <style>
          .mouseground{
            width: 400px;
            height: 400px;
            background-color: rgb(96, 100, 99);
          }
          .mousecage{
            width: 200px;
            height: 200px;
            background-color: rgb(69, 143, 124);
          }
        </style>
  </head>
  <body>
    <div class="main">
      <div class="header">
        <h1> サンプル </h1>
      </div>
      <div class="content"> 
        <h2>マウスの移動範囲</h2>
        <div class="mouseground">
          <div class="mousecage">
          </div>
        </div>
        <div class="desc"></div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2019 xxxx all rights reserved.</p>
      </div>
    </div>
    <script>
    $(document).ready(function(){
      $('.mousecage').hover(
        function(e){
        $('.desc').append('入りました（緑）<br>');
      }, function(e){
        $('.desc').append('外れました（緑）<br>');
      }
      );
    });
    </script> 
    </body>
</html>

カテゴリー:JavaScriptjQueryイベント