同时使用 ":active" 和 "onclick"

Question

问题是这样的：我在网站上有一张图片。在点击期间，图像应该被替换为看起来像“点击状态”...同时应该调用 javascript 函数...

单独使用“:active”和“onclick”没有问题，但不能结合使用...

有简单的解决方法吗？

如果“//可见性：隐藏；” onclick() 有效...

function play0() {
  alert("TEST");
}

#play0 {
  left: 10px;
  top: 10px;
  height: 100px;
  width: 100px;
  cursor: pointer;
  z-index: 3;
}

#play0:active {
  visibility: hidden;
}

#play1 {
  left: 10px;
  top: 10px;
  height: 100px;
  width: 100px;
  z-index: 2;
}

.animation_items {
  position: absolute;
}

<img class="animation_items" id="play0" onclick="play0()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/1200px-SMPTE_Color_Bars.svg.png">
<img class="animation_items" id="play1" src="https://i.ytimg.com/vi/ekthcIHDt3I/maxresdefault.jpg">

Answer 1

也许这个

function clicked(e) {
  alert(e.target.id)
}
document.getElementById("play0").addEventListener("mousedown",clicked)

#play0 {
  left: 85px;
  top: 160px;
  height: 100px;
  width: 100px;
  cursor: pointer;
  z-index: 3;
}

#play0:active {
  visibility: hidden;
}

#play1 {
  left: 85px;
  top: 160px;
  height: 100px;
  width: 100px;
  z-index: 2;
}

.animation_items {
  position: absolute;
}

<img class="animation_items" id="play0" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/SMPTE_Color_Bars.svg/1200px-SMPTE_Color_Bars.svg.png">
<img class="animation_items" id="play1" src="https://i.ytimg.com/vi/ekthcIHDt3I/maxresdefault.jpg">

同时使用 ":active" 和 "onclick"

Use ":active" and "onclick" simultaneously

html

javascript

css

onclick