Question

我有一个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; }

Answer 1

~~我假设您使用z-index属性将文本和按钮放在图像上。~~您必须使用合适的事件监视器/事件将点击事件渗透到图像上。处理程序模式，以便通过它们处理文本和按钮的适当单击，并且需要向下移动到图像的那些通过图像/按钮的事件处理程序进一步传递。

可能解决方案的相关问题：JavaScript pass mouseenter event to element that is underneath another element

在更多的研究中，这种技术被称为事件冒泡（对不起，这个术语早已让我想到了）。关于如何完成这项工作的其他帮助@ https://stackoverflow.com/a/1026101/17716

如何使用文本/按钮在顶部链接上制作图像

1 个答案: