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

Is it possible to make an entire img clickable even if it is overlapped by another element through z-index?

本文关键字：z-index 另一个 重叠 元素 有可能 img 是否      更新时间：2023-09-26

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

所以我想知道它是否仍然可行，使图像完全可点击，尽管它是由另一个元素重叠的事实。我想知道如何做到这一点，如果它可以在CSS或JavaScript(或两者)。

我使用HTML5和CSS3.

是可能的。

你也可以使用指针事件。

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

和CSS:

header h1 {pointer-events:none;}

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

不要将点击事件附加到图像上。将它附加到同时包装图像和h3的任何内容上。

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

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

相关文章：