Chrome鼠标事件不适用于后台的Webkit转换元素
榛子
我有两个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;
}
乔什·克罗齐耶（Josh Crozier）
如前所述，.page2由于该transform属性，该元素呈现在另一个元素的前面。
解决此问题的一种方法是将其添加pointer-events: none到元素中，以防止其影响其他元素。
.page2 {
pointer-events: none;
}
如MDN所述：
值“ none”指示鼠标事件“遍历”该元素并定位该元素“之下”的内容。
的替代方法pointer-events是将该元素提出来translateZ。
button {
-webkit-transform: translateZ(20px);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
转换TranslateX不适用于Chrome
- 2
-webkit-clip-path不适用于Chrome吗？
- 3
SVG鼠标悬停不适用于嵌套元素
- 4
click事件不适用于内部标记元素
- 5
jQuery事件不适用于动态附加的元素
- 6
点击事件不适用于新插入的元素
- 7
change事件不适用于动态生成的元素-jQuery
- 8
Click事件不适用于动态生成的元素
- 9
事件不适用于通过Ajax放入的元素
- 10
多个元素的AddEventListener不适用于“焦点”事件
- 11
jQuery click事件不适用于动态添加的元素
- 12
jQuery事件不适用于新创建的元素
- 13
Click事件不适用于动态添加的子元素
- 14
onclick事件不适用于svg元素
- 15
Jquery 事件不适用于 append() 中的元素
- 16
jQuery 单击事件适用于 Chrome，而不适用于 Firefox 或 IE
- 17
事件侦听器无法正常工作，适用于 chrome，不适用于 Firefox
- 18
转换不适用于嵌入式SVG Chrome
- 19
转换CSS属性不适用于<a>元素
- 20
转换不适用于块跨度元素
- 21
转换持续时间不适用于Safari，但适用于Chrome
- 22
水平滚动不适用于鼠标
- 23
面板上的C＃鼠标事件不适用于面板中的对象
- 24
onclick事件不适用于选项
- 25
preventDefault（）不适用于更改事件
- 26
QuerySelectorAll不适用于onclick事件
- 27
jQuery事件不适用于id
- 28
jQuery事件不适用于id
- 29
onClick事件不适用于Android
我来说两句