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

如前所述，由于.page2属性，元素transform正在另一个元素的前面呈现。

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

.page2 {
    pointer-events: none;
}

作为MDN states：

  

价值＆＃39;无＆＃39;指示鼠标事件进入＆＃34;通过＆＃34;元素和目标是＆＃34;在＆＃34;下面＆＃34;而是那个元素。

UPDATED EXAMPLE - 请注意pointer-events support。

pointer-events的替代方案是将元素带到translateZ。

EXAMPLE HERE

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