css-sprites - ロールオーバーのある図

Question

WordPress でレスポンシブ サイトを構築しており、3 つのホットスポットを含むインタラクティブなダイアグラムを作成する必要があります。三角形の角にある 3 つのアイコンはそれぞれ別のホットスポットになります...

青色をロールオーバーすると、青色の矢印とテキストが表示され、三角形の他の部分が部分的に隠されます -ここに見られるように. 同様に、緑をロールオーバーすると、緑の矢印とテキストが表示されます。そして最後に、ピンクをロールオーバーすると、ピンクの矢印とテキストが表示されます。

これまで CSS スプライトを試したことはありませんが、古い JavaScript の onMouseOut / onMouseOver メソッドよりも優れていることは理解しています。このインタラクティブな図を作成する最善の方法を教えてください。私はコーディングがあまり得意ではありません。どんな援助でも大歓迎です。

ありがとう！

Answer 1

CSS を使用すると、:hover疑似クラスを使用してロールオーバー時に何かを表示できます - JS は必要ありません!

#main div div {
    display: none;
}

#main div:hover div {
    display: block;
}

このフィドルを参照してください。