如何同时实现图片CSS红色覆盖层hover清除与点击触发JS函数？

我太懂这种「单个功能都跑得起，凑一起就罢工」的郁闷了！你遇到的问题大概率是红色覆盖层挡住了图片的点击事件——毕竟覆盖层一般是放在图片上层的，点击的时候触发的是覆盖层（但它没绑你的myFunction），自然就没反应了。下面给你两个简单有效的解决办法：

方法1：让覆盖层「透明」接收点击（推荐） #

给红色覆盖层加个CSS属性，让它只负责显示，不拦截任何点击事件，这样点击就会直接穿透到下面的图片上：

.image {
  position: relative;
  width: 400px;
  height: 300px; /* 补全你没写完的高度值 */
}
/* 假设你的红色覆盖层是.image的伪元素，用独立div也适用 */
.image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.6); /* 半透明红色遮罩 */
  transition: opacity 0.3s ease;
  /* 核心属性：让覆盖层不捕获点击 */
  pointer-events: none;
}
/* hover时隐藏覆盖层 */
.image:hover::after {
  opacity: 0;
}

然后给图片绑定点击事件就行：

<div class="image">
  <img src="你的图片路径" onclick="myFunction()" alt="目标图片">
</div>

方法2：把点击事件绑到父容器上 #

要是不想用pointer-events，也可以把点击事件直接绑定到包含图片和覆盖层的父容器.image上，这样不管覆盖层在不在，点击父容器区域都会触发你的函数：

<div class="image" onclick="myFunction()">
  <img src="你的图片路径" alt="目标图片">
</div>

CSS部分不用改，hover清除覆盖层的逻辑保持原样就行——因为点击的是父容器，覆盖层只是父容器的子元素，不会影响父容器的点击事件触发。

为啥之前会冲突？ #

你之前单独实现hover有效但点击失效，本质就是覆盖层在图片上方，点击事件被覆盖层「抢」走了，但覆盖层没有绑定myFunction，所以点击就没反应。用上面两种方法，就能让hover和点击功能和平共处啦！

内容的提问来源于stack exchange，提问作者5120bee