0

我有一个 div，其中包含一个带有文本的图像和一个覆盖在它上面的按钮。文本是绝对定位的，将覆盖整个图像。在文本的末尾也将是一个按钮。我试图让图像成为一个链接，但我在这样做时遇到了问题。

我目前的解决方案涉及将我的图像和文本都包装在一个a标签中。这不起作用，因为当用户尝试单击按钮时，他们会单击链接而不是按钮。我也尝试将我的 img 标签包装在标签内a，但由于我的文本位于顶部，因此该链接将永远不会被注册为可点击。

http://jsfiddle.net/NxtWa/

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; }
4

1 回答 1

1

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

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

在更多的研究中，这种技术被称为事件冒泡（对不起，这个词早些时候我忘记了）。有关如何完成此操作的其他帮助@ https://stackoverflow.com/a/1026101/17716

于 2012-10-16T04:08:33.957 回答