インラインスタイルで :hover を実現！ボタンをマウスオーバーで赤くする

2024-04-06

インラインスタイルで :hover を実現する

HTMLとCSSを用いて、要素にマウスオーバーした際に :hover と同様のスタイル変化を、インラインスタイルのみで実現する方法を紹介します。

方法

以下の方法があります。

style 属性と JavaScript を使用
CSS の @media クエリと JavaScript を使用

コード例

<button onclick="this.style.backgroundColor = 'red'">ボタン</button>

解説

onclick イベントで JavaScript を実行
style 属性で要素の背景色を直接変更

利点

シンプルで分かりやすい

欠点

インラインスタイルが冗長になる
JavaScript が必要

<button data-hover-color="red">ボタン</button>

<script>
const buttons = document.querySelectorAll('[data-hover-color]');

for (const button of buttons) {
  button.addEventListener('mouseenter', () => {
    button.style.backgroundColor = button.dataset.hoverColor;
  });

  button.addEventListener('mouseleave', () => {
    button.style.backgroundColor = '';
  });
}
</script>

data-hover-color 属性にマウスオーバー時の背景色を指定
JavaScript で mouseenter イベントと mouseleave イベントを処理

インラインスタイルをある程度整理できる

<button>ボタン</button>

<style>
@media (hover: none) {
  button {
    background-color: red;
  }
}
</style>

<script>
const buttons = document.querySelectorAll('button');

for (const button of buttons) {
  button.addEventListener('mouseenter', () => {
    button.classList.add('hover');
  });

  button.addEventListener('mouseleave', () => {
    button.classList.remove('hover');
  });
}
</script>

@media (hover: none) でホバー非対応環境を対象
JavaScript で classList を操作

ホバー非対応環境でもスタイルを適用できる

コード量が比較的多い

注意点

これらの方法は、単純なスタイル変化にのみ適用できます。
複雑なアニメーションなどには不向きです。

style 属性と JavaScript を使用

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
</head>
<body>
  <h1>ボタン</h1>
  <button onclick="this.style.backgroundColor = 'red'">ボタン</button>
</body>
</html>

data- 属性と JavaScript を使用

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
</head>
<body>
  <h1>ボタン</h1>
  <button data-hover-color="red">ボタン</button>

  <script>
  const buttons = document.querySelectorAll('[data-hover-color]');

  for (const button of buttons) {
    button.addEventListener('mouseenter', () => {
      button.style.backgroundColor = button.dataset.hoverColor;
    });

    button.addEventListener('mouseleave', () => {
      button.style.backgroundColor = '';
    });
  }
  </script>
</body>
</html>

CSS の @media クエリと JavaScript を使用

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>サンプルコード</title>
</head>
<body>
  <h1>ボタン</h1>
  <button>ボタン</button>

  <style>
  @media (hover: none) {
    button {
      background-color: red;
    }
  }
  </style>

  <script>
  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('mouseenter', () => {
      button.classList.add('hover');
    });

    button.addEventListener('mouseleave', () => {
      button.classList.remove('hover');
    });
  }
  </script>
</body>
</html>

各方法の比較

方法	利点	欠点
`style` 属性と JavaScript	シンプルで分かりやすい	インラインスタイルが冗長になる
`data-` 属性と JavaScript	インラインスタイルをある程度整理できる	JavaScript が必要
CSS の `@media` クエリと JavaScript	インラインスタイルを使用しない	JavaScript が必要

インラインスタイルで :hover を実現する他の方法

<button>ボタン</button>

<script>
const button = document.querySelector('button');

button.addEventListener('mouseenter', () => {
  button.classList.add('hover');
});

button.addEventListener('mouseleave', () => {
  button.classList.remove('hover');
});
</script>

<style>
.hover {
  background-color: red;
}
</style>

:hover 擬似クラスを CSS で定義

CSS Grid と pointer-events: none を使用

<div style="display: grid; grid-template-columns: repeat(2, 1fr)">
  <div style="background-color: red; pointer-events: none;"></div>
  <button>ボタン</button>
</div>

CSS Grid で 2 つの列レイアウトを作成
ボタンを右側の列に配置

:hover の擬似クラスを使用しない

ボタンの幅が固定される
レイアウトが複雑になる場合がある

<button>ボタン</button>

<script>
const button = document.querySelector('button');

button.addEventListener('mouseenter', () => {
  button.classList.add('animated');
});

button.addEventListener('mouseleave', () => {
  button.classList.remove('animated');
});
</script>

<style>
.animated {
  animation: my-animation 1s ease-in-out;
}

@keyframes my-animation {
  from {
    background-color: #fff;
  }
  to {
    background-color: red;
  }
}
</style>