css - Chrome 鼠标事件不适用于后台的 webkit-transform 元素

Question

我有两个 div。 Page1 有一个按钮...如果你将鼠标悬停在它上面，它会改变它的颜色。

如果我使用 webkit-transform 在后台添加 page2 div，按钮将不会再改变它的颜色。

HTML

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

CSS

.page1 {
    width: 300px;
    height: 300px;
    border: 1px solid #333;
    position: relative;
    background: #FFF;
    z-index: 2;
}
.page2 {
    width: 300px;
    height: 300px;
    background: #999;
    border: 1px solid #333;
    -webkit-transform: matrix3d(0.78784, 0, 0.13891, -0.00034, 0, 0.8, 0, 0, -0.17364, 0, 0.9848, -0.00246, 0, 0, 0, 1);
    position: absolute;
    top: 0;
    left: 50px;
    z-index: 1;
}
button {
    position: absolute;
    top: 50%;
    right: 1px;
    background: green;
    border: 0;
    font-size: 18px;
    color: #FFF;
}
button:hover {
    background: red;
}

jsfiddle

Answer 1

正如您已经说过的，由于 transform 属性，元素 .page2 被渲染在另一个元素的前面。

解决此问题的一种方法是添加 pointer-events: none到该元素，以防止它影响其他元素。

.page2 {
    pointer-events: none;
}

如MDN states :

the value 'none' instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

UPDATED EXAMPLE - 只需注意pointer-events的support .

pointer-events 的替代方案是使用 translateZ 将元素向前移动。

EXAMPLE HERE

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