Question

我在尝试允许用户点击图片并在悬停时有覆盖图时打开链接时遇到问题

以下是我的问题的an example

第一个版本不起作用，因为它在悬停时以阴影显示。在第二个版本中它全部起作用，因为它没有阴影

<div class="li_poster">
  <a href="http://google.com" target="_blank">
    <img src="http://www.logodesignlondon.co.uk/wp-content/uploads/2013/12/google.jpg" alt="google" title="google"/>
  </a>
  <span class="opt"></span>
</div>

那么如何使第一个版本的超链接保留在阴影中？

Answer 1

使用表格布局is bad semantics，尽量不要使用它。你的代码非常混乱，你错过了几个关闭</div>。您应该考虑重构代码以使其更具语义和可读性，但这是一个不同的问题

至于您的问题，您无法单击图像，因为您将图像与其他元素重叠，因此您不再单击要单击它的元素。在现代浏览器中，可以通过将pointer-events:none应用于叠加层来修复此问题，从而允许所有与鼠标相关的事件应用于底层元素

在旧版浏览器中，您必须使用similar but more involved approach

Working demo（仅限新浏览器）

超链接图像不起作用

1 个答案: