html - 如何反转悬停热点图像？

Question

我有一个热点图片如下:

<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;
}

Answer 1

CSS3 解决方案

很明显，您想要控制元素的不透明度 级别而不是它们的“叠加”。这有点棘手，但我找到了一个适用于支持 CSS3 的浏览器的解决方案(在 IE9、FF、Chrome 中测试过)。使用以下内容(如 this fiddle 中所示；当然，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 */
}

解释

前两个带有 opacity: 0.2 的选择器被设置为使其成为 .hotspotted 中所有元素的一种“默认”不透明度。然后，此默认值将被接下来的五个因素覆盖。前两个...

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

...确保当您没有将鼠标悬停在网页上时，一切都是可靠的。接下来的两个...

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

...确保当您将鼠标悬停在网页上时，但不是在热点上时，一切仍然保持稳定。然后最后一个...

.hotspotted > img ~ a:hover

... 将热点固定在悬停上，但随后允许前两个“接管”中的“默认”并淡化 .hotspotted 容器中的所有其他元素。