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解决方案

很明显，您希望控制元素的opacity级别而不是它们的“叠加”。这有点棘手，但我找到了支持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容器中的所有其他元素。

如何反转悬停热点图像？

1 个答案:

CSS3解决方案

说明