【JavaScript】マウスイベントの使い方｜mouseenter・mouseleave・mouseover・mousemove・CSS :hover との使い分けまで解説

<div id="parent">
  <span id="child">子要素</span>
</div>

const parent = document.getElementById("parent");

parent.addEventListener("mouseover", () => {
  console.log("mouseover"); // 親に入ったとき + 子要素に移動したときにも発火
});
parent.addEventListener("mouseout", () => {
  console.log("mouseout");  // 子要素に移動したときにも発火
});

const parent = document.getElementById("parent");

parent.addEventListener("mouseenter", () => {
  console.log("mouseenter"); // 親に入ったときだけ発火
});
parent.addEventListener("mouseleave", () => {
  console.log("mouseleave"); // 親から完全に出たときだけ発火
});

const box = document.getElementById("box");

box.addEventListener("mousemove", (e) => {
  console.log(`client: (${e.clientX}, ${e.clientY})`);  // ビューポート基準
  console.log(`page:   (${e.pageX}, ${e.pageY})`);      // ページ基準
  console.log(`offset: (${e.offsetX}, ${e.offsetY})`);   // 要素基準
});

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

const card = document.getElementById("card");

// Pointer Events: マウスでもタッチでも動作
card.addEventListener("pointerenter", () => {
  card.classList.add("is-hovered");
});
card.addEventListener("pointerleave", () => {
  card.classList.remove("is-hovered");
});

// デバイスの種類を判別
card.addEventListener("pointerdown", (e) => {
  console.log(e.pointerType); // "mouse" / "touch" / "pen"
});

const tooltip = document.getElementById("tooltip");

document.querySelectorAll("[data-tooltip]").forEach(el => {
  el.addEventListener("mouseenter", () => {
    tooltip.textContent = el.getAttribute("data-tooltip");
    tooltip.style.display = "block";
  });

  el.addEventListener("mousemove", (e) => {
    tooltip.style.left = (e.clientX + 12) + "px";
    tooltip.style.top = (e.clientY + 12) + "px";
  });

  el.addEventListener("mouseleave", () => {
    tooltip.style.display = "none";
  });
});

const menuItem = document.querySelector(".menu-item");
const dropdown = menuItem.querySelector(".dropdown");
let hideTimer = null;

menuItem.addEventListener("mouseenter", () => {
  clearTimeout(hideTimer);
  dropdown.style.display = "block";
});

menuItem.addEventListener("mouseleave", () => {
  // 300ms の遅延で閉じる（マウスがメニューに戻れば取り消し）
  hideTimer = setTimeout(() => {
    dropdown.style.display = "none";
  }, 300);
});

document.querySelectorAll(".thumbnail").forEach(thumb => {
  thumb.addEventListener("mouseenter", () => {
    const mainImg = document.getElementById("mainImage");
    mainImg.src = thumb.getAttribute("data-full-src");
    mainImg.alt = thumb.alt;
  });
});

.cursor-dot {
  position: fixed;
  width: 12px;
  height: 12px;
  background: #0284c7;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.1s ease;
  z-index: 9999;
}

const dot = document.querySelector(".cursor-dot");

document.addEventListener("mousemove", (e) => {
  dot.style.left = e.clientX + "px";
  dot.style.top = e.clientY + "px";
});