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

时间:2012-10-16 04:05:08

标签: html css

我有一个div,其中包含一个带有文本的图像和一个覆盖在其上方的按钮。文本位于绝对位置,将覆盖整个图像。在文本的最后也将是一个按钮。我试图让图像成为一个链接,但我遇到了问题。

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

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

1 个答案:

答案 0 :(得分:1)

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

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

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