我有一个div,其中包含一个带有文本的图像和一个覆盖在其上方的按钮。文本位于绝对位置,将覆盖整个图像。在文本的最后也将是一个按钮。我试图让图像成为一个链接,但我遇到了问题。
我目前的解决方案是将图片和文字包裹在a
标记内。这不起作用,当用户尝试单击按钮时,他们将单击链接而不是按钮。我也尝试在a
标记内包装我的img标记,但由于我的文本位于顶部,因此该链接永远不会被注册为可点击。
HTML:
<div class="tile">
<a href="http://www.google.ca">
<img src="http://www.placehold.it/480x260">
<div class="text">
<p>Long long paragraph</p>
<button>Button</button>
</div>
</a>
</div>
CSS:
.tile { position:relative; width:480px; height:260px; }
.tile .text { position:absolute; top:0px; left:0px; width:480px; height:260px; }
答案 0 :(得分:1)
我假设您使用z-index属性将文本和按钮放在图像上。您必须使用合适的事件监视器/事件将点击事件渗透到图像上。处理程序模式,以便通过它们处理文本和按钮的适当单击,并且需要向下移动到图像的那些通过图像/按钮的事件处理程序进一步传递。
可能解决方案的相关问题:JavaScript pass mouseenter event to element that is underneath another element
在更多的研究中,这种技术被称为事件冒泡(对不起,这个术语早已让我想到了)。关于如何完成这项工作的其他帮助@ https://stackoverflow.com/a/1026101/17716