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中所示；当然，不透明度级别可以更改为您想要的):

.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 容器中的所有其他元素。