Html 如何反向悬停热点图像？

我有一个热点图像，如下所示：

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

CSS3解决方案 显然，您希望控制元素的

不透明度

级别，而不是元素的“覆盖”。这有点棘手，但我为支持CSS3的浏览器找到了一个解决方案（在IE9、FF、Chrome中测试）。使用以下选项（如中所示；当然，

不透明度

级别可以更改为所需的级别）：

.hospotted>img，
.热点>img~a{
不透明度：0.2；/*悬停热点时“页面”的“默认”不透明度*/
}
.热点：不（：悬停）>img，
.热点：不（：悬停）>a，
.热点>图像：悬停，
.热点>图像：悬停~a，
.hostpotted>img~a：悬停{
不透明度：1；/*正常显示不透明度和悬停热点的不透明度*/
}

解释 前两个不透明度为

的选择器：0.2

被设置为

中所有元素的“默认”不透明度。然后，该默认值将被以下五个因素覆盖。前两个

.hospotted:not（：hover）>img，
.热点：不（：悬停）>a

。。。确保当你不在网页上滑动鼠标时，一切都是可靠的。接下来的两个

.hospotted>img:hover，
.热点>图像：悬停~a

。。。确保当你将鼠标移到网页上，而不是热点上时，一切都保持稳定。然后最后一个

.hostpotted>img~a:悬停

。。。将热点保持在悬停状态，然后允许前两个“接管”中的“默认值”，并淡出
.hospotted
容器中的所有其他元素。
您实际上是希望它“变暗”还是希望它变得“透明”（这更像是您尝试的代码试图做到的）？另外，您是否只想将此功能用于
热点1
或（如您的代码所示）用于每个
热点
？问题已编辑。我想要每个热点的函数。我想通过让一个工作，我也能让另一个工作。单词
function
是否意味着你要使用JavaScript或jQuery，或者这是你想要的纯CSS解决方案？@arttronics:到目前为止，它看起来只是CSS。“我希望每个热点都有功能”应该是“我希望每个热点都有功能”。@simpatico，+1表示术语
CSS function
，我不得不这么做。我认为一个考虑的方法是使用<代码> div <代码>使用<代码> ID=“HoSptoToVeLead”< /C> >之前使用CSS <代码>：或CSS<代码>：当“代码> HOTSPON1有<代码>：HOFFE/<代码>事件时，将影响此覆盖。到目前为止，我的尝试没有成功。参考：在你的小提琴中，你的img基本上是整个页面的背景。对我来说，情况不一样：@simpatico——你的图像也可以作为页面背景。它不起作用，因为您正试图通过另一个元素的悬停来更改图像的一部分。这在css中是不可能的。您需要：1）将图像拆分为两个图像，每个图像都包含在
a
标记中，然后在屏幕上“重建”图像（这可以作为
背景图像而不是
img
），或者2）使用通过Dreamweaver或其他方式映射的图像，然后为此设置高亮显示#2允许对您的拼图形状进行微调。这些都不是选项。imagemap不是因为流畅的布局（而且imagemaps中的百分比在iPad上不起作用）。@simpatico——好吧，我承认
imagemap
不能流畅。然而，从我的观点来看，将你的图像分成两部分（或三部分，作为“背景”的手和
a
标签中的两个拼图块）似乎是一个完全合理的解决方案，可以满足你的需要（当然，我不知道你的所有目标）。事实是，这基本上是你得到你想要的效果的唯一途径。
.hotspot {
    display: block;
    position: absolute;
}

.hotspotted:hover a{
    opacity: 0.8;
}

.hotspotted a:hover{
    opacity: 0;
}