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 中测试）。使用以下内容（如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容器中的所有其他元素。

于 2012-07-12T02:30:10.443 回答