【CSS】「Hover」と「Active」を無効状態時にのみ適用する2つの方法

2024-05-14

CSSで「Hover」と「Active」を無効状態時にのみ適用する方法

CSSにおいて、「Hover」と「Active」の疑似クラスは、要素にマウスカーソルを合わせた状態と押下状態を表すために使用されます。しかし、これらの状態は、要素が無効状態（disabled属性が設定されている状態）の場合には適用されません。

このチュートリアルでは、CSSを使用して、「Hover」と「Active」を無効状態時にのみ適用する方法を2つ紹介します。

この方法は、属性セレクタと擬似クラスを組み合わせて、無効状態ではない要素にのみ「Hover」と「Active」の状態を適用します。

/* 無効状態ではない要素にのみスタイルを適用 */
button:not([disabled]):hover {
  background-color: #ccc;
  cursor: pointer;
}

button:not([disabled]):active {
  background-color: #999;
}

/* 無効状態ではない要素にのみスタイルを適用 */
.enabled:hover {
  background-color: #ccc;
  cursor: pointer;
}

.enabled:active {
  background-color: #999;
}

補足

上記の例では、ボタン要素を対象としていますが、他の要素にも同様に適用できます。
無効状態ではない要素を判別するために、not([disabled])属性セレクタを使用しています。
無効状態ではない要素にのみスタイルを適用するために、enabledクラスを使用しています。

例

<button class="enabled">有効なボタン</button>
<button disabled>無効なボタン</button>

注意点

上記の方法は、すべてのブラウザでサポートされているわけではありません。古いブラウザでは、正しく動作しない場合があります。
無効状態の要素に「Hover」と「Active」の状態を適用する必要がある場合は、JavaScriptを使用する必要があります。

<!DOCTYPE html>
<html>
<head>
<style>
  /* 無効状態ではない要素にのみスタイルを適用 */
  button:not([disabled]):hover {
    background-color: #ccc;
    cursor: pointer;
  }

  button:not([disabled]):active {
    background-color: #999;
  }
</style>
</head>
<body>
  <button>有効なボタン</button>
  <button disabled>無効なボタン</button>
</body>
</html>

説明

このコードは、HTMLとCSSファイルで構成されています。
HTMLファイルには、2つのボタン要素が定義されています。
最初のボタンには disabled 属性が設定されていないため、有効なボタンとして扱われます。
CSSファイルには、無効状態ではない要素にのみ「Hover」と「Active」の状態を適用するスタイルが定義されています。

動作

有効なボタンにマウスカーソルを合わせると、ボタンの背景色が薄灰色になり、カーソルがポインタに変更されます。
有効なボタンを押すと、ボタンの背景色が濃い灰色になります。
無効なボタンには、マウスカーソルを合わせても押しても、視覚的な変化は起こりません。

このサンプルコードは、基本的な例です。必要に応じて、スタイルを自由にカスタマイズすることができます。

CSSで「Hover」と「Active」を無効状態時にのみ適用するその他の方法

この方法は、pointer-eventsプロパティを使用して、無効状態の要素に対するポインターイベントを無効化し、「Hover」と「Active」の状態を適用しないようにします。

/* 無効状態の要素に対するポインターイベントを無効化 */
button:disabled {
  pointer-events: none;
}

/* 有効な要素にのみスタイルを適用 */
button:hover {
  background-color: #ccc;
  cursor: pointer;
}

button:active {
  background-color: #999;
}

方法4：JavaScript

この方法は、JavaScriptを使用して、無効状態の要素を判定し、「Hover」と「Active」の状態を適用するかどうかを制御します。

<button onclick="myFunction(this)">有効なボタン</button>
<button disabled>無効なボタン</button>

<script>
function myFunction(element) {
  if (!element.disabled) {
    element.style.backgroundColor = "#ccc";
    element.style.cursor = "pointer";
  }
}
</script>

それぞれの方法の比較

方法	利点	欠点
属性セレクタと擬似クラスの組み合わせ	シンプルでわかりやすい	古いブラウザではサポートされない可能性がある
クラスセレクタと擬似クラスの組み合わせ	柔軟性が高い	余分なクラスを定義する必要がある
`pointer-events`プロパティ	シンプルで効果的	古いブラウザではサポートされない可能性がある
JavaScript	柔軟性と制御性に優れている	複雑で、JavaScriptの知識が必要