2

次のようなホットスポット画像があります。

<div class="hotspotted">
    <img height="100%" width="100%" src="puzzle_hotspot.png"/>
    <a href="a.html" id="hotspot1" class="hotspot"></a>
    <a href="b.html" id="hotspot2" class="hotspot"></a>
</div>

hotspot1 にカーソルを合わせると、ページの残りの部分が暗くなることを望みます。どうすればそれを達成できますか？

私はそれらの行に沿って何かを考えました（しかし、それらの行は何もしません）：

.hotspot {
    display: block;
    position: absolute;
}

.hotspotted:hover a{
    opacity: 0.8;
}

.hotspotted a:hover{
    opacity: 0;
}
4

1 に答える 1

2

CSS3 ソリューション

opacity要素の「オーバーレイ」ではなく、要素のレベルを制御したいことは明らかです。少しトリッキーでしたが、CSS3 対応ブラウザー (IE9、FF、Chrome でテスト済み) 向けに見つけた解決策があります。以下を使用してください（このフィドルで示されているように、もちろん、opacityレベルは必要に応じて変更できます）：

.hotspotted > img,
.hotspotted > img ~ a {
    opacity: 0.2; /* "default" opacity of "page" when hovering a hotspot */
}

.hotspotted:not(:hover) > img,
.hotspotted:not(:hover) > a,
.hotspotted > img:hover,
.hotspotted > img:hover ~ a,
.hotspotted > img ~ a:hover {
    opacity: 1; /* normal display opacity and that of hovered hotspot */
}

説明

の最初の 2 つのセレクターはopacity: 0.2、 内のすべての要素の一種の「デフォルト」の不透明度になるように設定されています.hotspotted。次に、このデフォルトは次の 5 つの要因によってオーバーライドされます。最初の二つ...

.hotspotted:not(:hover) > img,
.hotspotted:not(:hover) > a

... Web ページにマウスオーバーしていないときは、すべてが安定していることを確認してください。次の2つ…

.hotspotted > img:hover,
.hotspotted > img:hover ~ a

... ホットスポットではなくWeb ページにマウスオーバーしたときに、すべてが安定したままであることを確認してください。そしたら最後は…

.hotspotted > img ~ a:hover

...ホバー時にホットスポットをしっかりと保持しますが、最初の2つの「テイクオーバー」からの「デフォルト」を許可し、.hotspottedコンテナー内の他のすべての要素をフェードします。

于 2012-07-12T02:30:10.443 に答える