代码之家 › 专栏 › 技术社区 › 5120bee

在图像上放置CSS透明覆盖,并在单击图像时使JavaScript功能工作?

overlay onclick css html javascript

5120bee · 技术社区 · 7 年前

我在编写CSS脚本时遇到了一些问题,它会让我在同时 :

当我将鼠标悬停在
使我的图片可单击,以便它将执行不相关的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("http://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函数可以工作,但我不再有彩色(红色)覆盖,因为我去掉了“image”类:

函数myFunction(){
//
}

。图像{
位置:相对;
宽度:400px;
高度:400px;
}

。图像:之后{
内容:“\A”;
位置:绝对;
宽度:100%;身高:100%;
顶部:0;左:0;
背景:rgba(256,0,0,0.6);
不透明度:1;
过渡:全部0.5s;
-webkit过渡:全部0.5s;
}
。图像:悬停:之后{
不透明度:0;
}

。游标{游标:指针}

。我的图像{
背景:url(“”http://i.stack.imgur.com/Sjsbh.jpg)无重复50%50%;
宽度:400px;
高度:400px;
背景尺寸:封面;
}

<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工作?

2 回复 | 直到 7 年前

Obsidian Age 7 年前

简单地将单击处理程序移动到父级如何 .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("http://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>

Ori Drori 7 年前

使用 pointer-events: none; 在 :after 伪元素使其对鼠标事件透明:

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("http://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