热点顶部的文本阻止热点响应。

Question

我正在建立一个有背景图像的网页。在此基础上，我有一个CD的半透明图像(不透明度0.2)，并使用Dreamweaver在CD映像周围创建了一个热点，然后添加了一个链接，这一切都很好。接下来，我在CD图像的中心添加了文本，现在当我在图像中心的文本上鼠标移动时，热点没有响应。我正在处理页面左下角的CD图像，可以在这里看到http://lawenforcementspanish.com/chris/index3.php。

谢谢你能提供的任何方向。

Answer 1

<div class="homePageCd fltlft">
  <div class="text_over_image">Hear my<br>music</div>
<img src="images/CDimage.png" usemap="#Map" style="opacity:0.2" border="0">
<map name="Map" id="Map">
  <area shape="circle" coords="129,129,124" href="discography.php">
</map>

</div>

包含文本的div与图像和锚重叠。

将<div class="text_over_image">Hear my<br>music</div>放在img之前

Answer 2

您可以将text_over_image移到图像后面，方法是将它放在html标记中的img前面。但是，如果希望将文本实际保存在顶部，可以使用pointer-event:none将元素隐藏起来以悬停并单击“事件”。

只需将其添加到CSS中：

.text_over_image {
    pointer-events: none;
}

但是，值得注意的是，在旧浏览器中不太支持CSS指针事件。