ワンランク上のWebデザイン！CSSアニメーションを使ったホバーエフェクト

2024-04-02

CSSのみで別の要素の上にマウスを置いた時にdivを表示する方法

このチュートリアルでは、CSSのみを使用して、別の要素の上にマウスを置いた時にdivを表示する方法を解説します。

必要なもの

テキストエディタ
ウェブブラウザ

手順

HTMLファイルを作成し、以下のコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSのみでホバー時にdivを表示</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>メインコンテンツ</h1>
  <p>ここにマウスオーバーしたい要素があります</p>
  <div class="tooltip">
    ここに表示したい内容があります
  </div>
</body>
</html>

.tooltip {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

p:hover .tooltip {
  display: block;
}

コード解説

display: none; は、初期状態でdivを非表示にします。
position: absolute; は、divを絶対配置にします。
z-index: 1; は、divを他の要素の上に表示します。
background-color: #fff; は、divの背景色を白にします。
padding: 10px; は、divの内側に10pxのパディングを設定します。
border: 1px solid #ccc; は、divに1pxの灰色の枠線を設定します。
border-radius: 5px; は、divの角丸半径を5pxに設定します。
p:hover .tooltip { display: block; } は、"ここにマウスオーバーしたい要素があります" にマウスを置いた時のみ、divを表示します。

応用

divの表示位置やデザインを変更することができます。
複数のdivを表示することができます。
JavaScriptと組み合わせて、より複雑な動きを実現することができます。

HTMLファイル:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSのみでホバー時にdivを表示</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>メインコンテンツ</h1>
  <p>ここにマウスオーバーしたい要素があります</p>
  <div class="tooltip">
    ここに表示したい内容があります
  </div>
</body>
</html>

CSSファイル:

.tooltip {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

p:hover .tooltip {
  display: block;
}

説明

その他のスタイルは、必要に応じて変更してください。

動作確認

上記のコードをHTMLファイルとCSSファイルに保存します。

CSSのみで別の要素の上にマウスを置いた時にdivを表示する他の方法

.element {
  display: inline-block;
}

.tooltip {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.element:hover + .tooltip {
  display: block;
}

隣接セレクタ + を使用して、element の直後に隣接する .tooltip のみを表示します。

兄弟セレクタを使用する

.element {
  display: inline-block;
}

.tooltip {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.element:hover ~ .tooltip {
  display: block;
}

JavaScriptを使用する

<script>
function showTooltip(element) {
  var tooltip = element.nextElementSibling;
  tooltip.style.display = "block";
}

function hideTooltip(element) {
  var tooltip = element.nextElementSibling;
  tooltip.style.display = "none";
}
</script>

.element {
  display: inline-block;
}

.tooltip {
  display: none;
  position: absolute;
  z-index: 1;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}