jQueryのhover処理の書き方｜mouseenter・mouseleaveとスマホ対応を初心者向けに解説

$('.product-card')
  .on('mouseenter', function () {
    $(this).addClass('is-hovered');
  })
  .on('mouseleave', function () {
    $(this).removeClass('is-hovered');
  });

// 新しく書くコードでは使用しません
$('.product-card').hover(
  function () {
    $(this).addClass('is-hovered');
  },
  function () {
    $(this).removeClass('is-hovered');
  }
);

.product-card:hover,
.product-card:focus-visible {
  border-color: #2f66d0;
  box-shadow: 0 18px 42px rgb(47 102 208 / 18%);
}

<a class="product-card" href="#details">
  <div class="product-card__visual" aria-hidden="true">UI</div>
  <div>
    <h2>Webデザイン入門</h2>
    <p>余白・配色・文字組みの基本を学びます。</p>
    <span class="product-card__hint">
      カーソルを合わせるか、Tabキーで選択してください
    </span>
  </div>
</a>

<script src="jquery-4.0.0.min.js"></script>
<script src="script.js"></script>

.product-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
  border: 2px solid #dce4f1;
  border-radius: 22px;
  color: #172033;
  background: #fff;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}

.product-card.is-hovered {
  border-color: #2f66d0;
  box-shadow: 0 18px 42px rgb(47 102 208 / 18%);
}

.product-card:focus-visible {
  outline: 4px solid #f5bd42;
  outline-offset: 4px;
}

.product-card__visual {
  width: 180px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, #2f66d0, #7c5ce0);
  font-size: 52px;
  font-weight: 800;
}

.product-card__hint {
  display: inline-block;
  margin-top: 18px;
  color: #2f66d0;
  font-weight: 700;
}

@media (max-width: 640px) {
  .product-card {
    grid-template-columns: 1fr;
  }

  .product-card__visual {
    width: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card {
    transition: none;
  }
}

const $productCard = $('.product-card');

$productCard
  .on('mouseenter focusin', function () {
    $(this).addClass('is-hovered');
    $(this).find('.product-card__hint').text('詳しい内容を表示中です');
  })
  .on('mouseleave focusout', function () {
    $(this).removeClass('is-hovered');
    $(this)
      .find('.product-card__hint')
      .text('カーソルを合わせるか、Tabキーで選択してください');
  });

<div class="help-area">
  <button
    id="help-button"
    type="button"
    aria-expanded="false"
    aria-controls="help-popover"
  >
    用語の補足を見る
  </button>

  <aside id="help-popover" class="help-popover" hidden>
    <h2>イベントとは？</h2>
    <p>クリックやマウス移動など、ブラウザ上で起きる変化をイベントと呼びます。</p>
    <a href="#more">さらに詳しく確認する</a>
  </aside>
</div>

const $helpArea = $('.help-area');
const $helpButton = $('#help-button');
const $helpPopover = $('#help-popover');

function openHelp() {
  $helpPopover.prop('hidden', false);
  $helpButton.attr('aria-expanded', 'true');
}

function closeHelp() {
  $helpPopover.prop('hidden', true);
  $helpButton.attr('aria-expanded', 'false');
}

$helpArea
  .on('mouseenter', openHelp)
  .on('mouseleave', closeHelp)
  .on('focusin', openHelp)
  .on('focusout', function (event) {
    if (!this.contains(event.relatedTarget)) {
      closeHelp();
    }
  });

$helpButton.on('click', function () {
  if ($helpPopover.prop('hidden')) {
    openHelp();
  } else {
    closeHelp();
  }
});

$(document).on('keydown', function (event) {
  if (event.key === 'Escape' && !$helpPopover.prop('hidden')) {
    $helpButton.trigger('focus');
    closeHelp();
  }
});

$('.card-list')
  .on('mouseenter', '.product-card', function () {
    $(this).addClass('is-hovered');
  })
  .on('mouseleave', '.product-card', function () {
    $(this).removeClass('is-hovered');
  });