单击图像时，将CSS透明覆盖层放在图像上，并使JavaScript功能起作用

Question

我在脚本上遇到困难，以使我可以在同一时间进行以下操作：

• 当我悬停在
上时，清除彩色覆盖(红色(
• 使我的图片可单击，以便它可以执行无关的JavaScript函数

目前，我一次只能单独做这些事情。

我的第一次尝试 - 清除悬停的彩色覆盖层，但我的JavaScript功能将行不通：

function myFunction() {
	/..../
}

.image {
    position:relative;
    width:400px;
    height:400px;
}
.image:after {
    content:'A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(256,0,0,0.6);
    opacity:1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:0;
}
.cursor { cursor: pointer}
.myImage {
  background: url("https://i.stack.imgur.com/Sjsbh.jpg") no-repeat 50% 50%;
  width: 400px;
  height: 400px;
  background-size: cover;
}

<div class="image">
<!--when the "image" class is present, I cannot perform myFunction() by clicking on the picture -->
  <div class="myImage cursor" onclick="myFunction()">
  
  </div>
</div>http://jsfiddle.net/9z26ky19/2429/#run

我的替代尝试 - 在这里我的javascript函数有效，但由于我摆脱了"图像"类，我不再有彩色(红色(覆盖层：

function myFunction() {
	/..../
}

.image {
    position:relative;
    width:400px;
    height:400px;
}
.image:after {
    content:'A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(256,0,0,0.6);
    opacity:1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:0;
}
.cursor { cursor: pointer}
.myImage {
  background: url("https://i.stack.imgur.com/Sjsbh.jpg") no-repeat 50% 50%;
  width: 400px;
  height: 400px;
  background-size: cover;
}

<div>
<!--when the "image" class is NOT present, myFunction() JavaScript works BUT I no longer have the colored (red) overlay -->
  <div class="myImage cursor" onclick="myFunction()">
  
  </div>
</div>http://jsfiddle.net/9z26ky19/2429/#run

我如何以某种方式脚本脚本，以使我可以在图像上有彩色(红色(覆盖层并具有javascript myfunction工作？

Answer 1

简单地将点击处理程序移至父 .image <div>？

function myFunction() {
	console.log('clicked');
}

.image {
    position:relative;
    width:400px;
    height:400px;
}
.image:after {
    content:'A';
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(256,0,0,0.6);
    opacity:1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:0;
}
.cursor { cursor: pointer}
.myImage {
  background: url("https://i.stack.imgur.com/Sjsbh.jpg") no-repeat 50% 50%;
  width: 400px;
  height: 400px;
  background-size: cover;
}

<div class="image" onclick="myFunction()">
  <div class="myImage cursor">
  </div>
</div>

Answer 2

在 :after上使用 pointer-events: none; pseudo元素使其与鼠标事件透明：

function myFunction() {
  console.log('click');
}

.image {
  position: relative;
  width: 400px;
  height: 400px;
}
.image:after {
  content: 'A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(256, 0, 0, 0.6);
  opacity: 1;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  pointer-events: none;
}
.image:hover:after {
  opacity: 0;
}
.cursor {
  cursor: pointer
}
.myImage {
  background: url("https://i.stack.imgur.com/Sjsbh.jpg") no-repeat 50% 50%;
  width: 400px;
  height: 400px;
  background-size: cover;
}

<div class="image">
  <!--when the "image" class is present, I cannot perform myFunction() by clicking on the picture -->
  <div class="myImage cursor" onclick="myFunction()">
  </div>
</div>http://jsfiddle.net/9z26ky19/2429/#run