マウスオーバーすると色が変わり別の場所の画像が変わるCSS

締切済

質問者：じゅにこ
質問日時：2025/02/19 16:06
回答数：1件

宜しくお願いします。
ボタンをマウスオーバーすると色が変わり、また、別の場所の画像が変わり、リンクが出来るCSSを教えて欲しいです。

例えば、イラストを添付しましたが、イラスト１番の「あか」のボタンをマウスオーバーすると、イラスト２番のように「あか」の色が変わり、中央のまるの中に、画像（または文字）が出るようにしたいです。

同じく、あお、きいろ、みどりのボタンをマウスオーバーすると、色が変わり、それぞれ違う文言が出てきてリンクができるというものです。

教えて下さい。宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2025/02/19 19:50

こんばんは

＞CSSを教えて欲しいです。
CSSのみで実現したいってことでしょうか？
（スクリプトを使った方が簡単かも）

※ 全部書くのは面倒なので、上二つの四角（ボタン？）だけ反応します。
※ 仕組みが主なので、レイアウトやタグ、クラス等はかなりテキトーです。
以下、ご参考までに。

[ HTML ]
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<div>
<div class="yellow">きいろ</div>
<div class="red">あか</div>
</div>
<div>
<div class="green">みどり</div>
<div class="blue">あお</div>
</div>
<div class="comment">
<span class="c_yellow">きいろさん<br>こんにちは</span>
<span class="c_red">あかさん<br>こんにちは</span>
</div>
</div>
</body>
</html>

[ CSS ]
#wrapper {
position: relative;
width: 25em; height:25em;
}
#wrapper > div {
display: flex;
justify-content: space-between;
}
#wrapper > div:nth-child(2) {
position: absolute;
top: 100%; width: 100%;
transform: translateY(-100%);
}

/* ボタン(?) のサイズと色等 */
#wrapper div div {
padding: .4em; width: 6em;
color: black; font-weight: bold;
text-align: center;
text-weight: bold;
}
.yellow { background-color: gold; }
.red { background-color: tomato; }
.green { background-color: lightgreen; }
.blue { background-color: lightskyblue; }

/* ホバー時に色を変える仕組み */
.yellow:hover { background-color: darkorange; }
.red:hover { background-color: chocolate; }

/* 中央丸のレイアウト */
.comment, .comment > span {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.comment {
width: 20em; height: 20em;
border: 5px solid black;
border-radius: 50%;
}
.comment > span {
width: 80%;
text-align: center;
font-size: 3em;
display: none;
}

/* ボタン(?)ホバーでテキストを表示する仕組み */
div:has(.yellow:hover) ~ .comment .c_yellow { display: block; }
div:has(.red:hover) ~ .comment .c_red { display: block; }