Question

以下是我目前的情况：我在<img>中定义了一个图片，在<h3>中定义了一个标头。但是，由于标题的一部分隐藏在图像后面，因此我将z-index: 300设置为标题，以便将其放在图像上方。但是，我还想对图像设置onClick操作，以便当用户点击图像时，他或她会在那里看到某种操作。但由于标题现在覆盖了大部分图像，因此用户可以点击以唤起动作的空间非常小。

所以我想知道是否仍然可以使图像完全可点击，尽管它与另一个元素重叠。如果可以在CSS或JavaScript（或两者）中完成，我想知道该怎么做。

我使用HTML5和CSS3。

Answer 1

请勿将click事件附加到图像。将它附加到包裹图像和h3的任何内容中。

<div class='parent'>
    <img />
    <h3></h3>
</div>

所以你会在这个例子中绑定到.parent。

Answer 2

是的，这是可能的。

您也可以使用指针事件。

<header>
    <h1>My text overlapping</h1>
    <img class="fullSizeUnderneath"/>
</header>

和css：

header h1 {pointer-events:none;}

鼠标不会看到它，即使在它下面，图像也会捕捉到点击事件。的 DEMO

是否有可能使整个img可点击，即使它通过z-index与另一个元素重叠？

2 个答案: