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 Pointer Events isn't well supported in old browsers。

热点顶部的文本可防止热点响应

2 个答案: