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

【问题标题】：Chrome mouse events do not work with webkit-transform elements in backgroundChrome 鼠标事件不适用于后台的 webkit-transform 元素
【发布时间】：2014-03-11 23:52:29
【问题描述】：

我有两个 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

【问题讨论】：

这是你想要的吗？ jsfiddle.net/y4BVf
太完美了！非常感谢！
我应该把它作为答案吗？
是的，请将其添加为答案

标签： css google-chrome mouseevent

【解决方案1】：

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

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

.page2 {
    pointer-events: none;
}

作为MDN states:

值 'none' 指示鼠标事件“穿过”该元素并瞄准该元素“下方”的任何内容。

UPDATED EXAMPLE - 请注意pointer-events 的support。

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

EXAMPLE HERE

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

【讨论】：