【Webデザイナー必見】CSSでリスト項目にカーソルを合わせた時に手を表示する3つの方法

2024-04-02

CSSでリスト項目にカーソルを合わせた時に手を表示する方法

CSSの cursor プロパティと :hover 疑似クラスを使用して、リスト項目にカーソルを合わせた時にカーソルを手に変えることができます。

手順

HTMLファイルにリスト項目を記述します。

<ul>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
</ul>

CSSファイルに以下のコードを記述します。

ul li {
  cursor: default;
}

ul li:hover {
  cursor: pointer;
}

解説

ul li セレクタは、すべてのリスト項目を選択します。
cursor: default; は、リスト項目のデフォルトカーソルを矢印に設定します。
ul li:hover 疑似クラスは、リスト項目にカーソルが重なった時に適用されます。
cursor: pointer; は、カーソルを手に設定します。

実行結果

上記のコードを実行すると、リスト項目にカーソルを合わせた時にカーソルが手に変わります。

応用

リスト項目だけでなく、他の要素にもカーソルを変更することができます。
カーソルの画像を変更することもできます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>リスト項目にカーソルを合わせた時に手を表示するサンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>リスト項目にカーソルを合わせた時に手を表示するサンプル</h1>
  <ul>
    <li>リスト項目 1</li>
    <li>リスト項目 2</li>
    <li>リスト項目 3</li>
  </ul>
</body>
</html>

ul li {
  cursor: default;
}

ul li:hover {
  cursor: pointer;
}

上記コードは基本的なサンプルです。必要に応じて変更してください。
コードの動作を確認するには、ブラウザの開発者ツールを使用して、HTML コードと CSS コードを確認することをおすすめします。

CSSでリスト項目にカーソルを合わせた時に手を表示する他の方法

方法 1: a タグを使用する

リスト項目内に a タグを使用する方法は、以下の通りです。

<ul>
  <li><a href="#">リスト項目 1</a></li>
  <li><a href="#">リスト項目 2</a></li>
  <li><a href="#">リスト項目 3</a></li>
</ul>

ul li a {
  cursor: default;
}

ul li a:hover {
  cursor: pointer;
}

この方法は、リスト項目がリンクである場合に有効です。

方法 2: ::before 疑似要素を使用する

::before 疑似要素を使用する方法は、以下の通りです。

<ul>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
</ul>

ul li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: default;
}

ul li:hover::before {
  cursor: pointer;
}

この方法は、リスト項目にコンテンツを追加せずにカーソルを変更することができます。

方法 3: JavaScriptを使用する

JavaScriptを使用する方法は、以下の通りです。

<ul>
  <li>リスト項目 1</li>
  <li>リスト項目 2</li>
  <li>リスト項目 3</li>
</ul>

const listItems = document.querySelectorAll("ul li");

for (const listItem of listItems) {
  listItem.addEventListener("mouseover", () => {
    listItem.style.cursor = "pointer";
  });

  listItem.addEventListener("mouseout", () => {
    listItem.style.cursor = "default";
  });
}