gpt4 book ai didi

javascript - 使用 Z-index 在子分层 Div 上触发 Onclick,指针事件不起作用

转载 作者:行者123 更新时间:2023-11-28 17:02:41 25 4
gpt4 key购买 nike

我希望能够单击并更改由 png 剪切的背景 (div) 的颜色。

<body>
<div style="border: 1px solid red; width: 650px; height: 500px; margin: 0px auto; pointer-events: none; ;">
<div class="frame" style="background-color: blue; -webkit-mask-image: url('./assets/Layer1.png'); z-index: 0"></div>
<div class="frame" style="background-color: red; -webkit-mask-image: url('./assets/Layer2.png'); z-index: 1"></div>
<div class="frame" style="background-color: grey; -webkit-mask-image: url('./assets/Layer3.png'); z-index: 2"></div>
<div class="frame" style="background-color: yellow; -webkit-mask-image: url('./assets/Layer4.png'); z-index: 3"></div>
</div>

<style>
.frame {
position: absolute;
pointer-events: auto;
width: 640px;
height: 490px;
padding: 1px;
margin: 0px auto;
box-sizing: border-box;
}
</style>
</body>

IMAGE

最佳答案

向父 div 添加一个 ID,并在其上添加一个点击处理程序。

let parent = document.getElementById('parent')
parent.addEventListener('click', function() {
parent.style.backgroundColor = event.target.style.backgroundColor;
})

关于javascript - 使用 Z-index 在子分层 Div 上触发 Onclick,指针事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51905560/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com