Css Chrome鼠标事件不适用于背景中的webkit变换元素

我有两张唱片。页面1有一个按钮。。。如果你把鼠标悬停在它上面，它会改变它的颜色

如果我在背景中添加一个带有webkit变换的page2 div，按钮将不再改变其颜色

HTML

<div class="page1">
    <button>hover</button>
</div>
<div class="page2"></div>

---

如前所述，由于

transform

属性，元素

.page2

呈现在另一个元素前面

解决此问题的一种方法是添加到元素中，以防止它影响其他元素

.page2 {
    pointer-events: none;
}

作为：

值“none”指示鼠标事件“穿过”元素，并以该元素“下面”的内容为目标

-只需注意

指针事件

指针事件

的另一种替代方法是使用

translateZ

向前移动元素

---

这是你想要的吗？太好了！谢谢！我应该把它作为答案吗？是的，请加上它作为答案

.page2 {
    pointer-events: none;
}

button {
    -webkit-transform: translateZ(20px);
}