Question

我正在开发一个移动网络应用程序，我有点混淆：我有一个名为UpperDiv的div，z-index为50，在该div下，还有另一个div，名为UnderDiv，z-index为0。问题是，当我“点击”UpperDiv时，它会激活我的UnderDiv元素（我点击的地方）上的：active伪类。我应该怎么做才能禁用它？

----------------------------- EDITED ----------------- ---------------

终于有效!!!!

我忘了提到我正在使用过渡来打开/关闭我的UpperDiv。因此，在打开我正在使用时：

$('#myDiv').css('-webkit-transform', 'translate3d(200px, 0px, 0px)').bind('webkitTransitionEnd', function(){
  $('.underDiv').css('pointer-events', 'none');
});

当我关闭时：

$('#myDiv').css('-webkit-transform', 'translate3d(0px, 0px, 0px)').bind('webkitTransitionEnd', function(){
  $('.underDiv').css('pointer-events', 'auto');
});

如果可以帮助别人，它对我来说很好......

Answer 1

如果这是在Android上，它将类似于这个问题

Is there a workaround for the Android browser bug with CSS-Position and clickable areas?

当你更改页面的DOM以及一些z-index堆叠时，这是一个Android浏览器（并且只有那里）的错误。下面的图层将成为鼠标点击的目标，即使有些东西堆叠在它上面。

上述问题有一些解决方法可能对您有用。

我读到了在两个div之间使用z-index 20的空flash影片。

这是另一个问题，可能有答案 Android Webkit: Absolutely positioned elements don't respect z-index

在谷歌的问题页面上，某些开发人员有一个解决方法。 https://code.google.com/p/android/issues/detail?id=6721#c26

问题是：如果更改HTML元素的CSS（例如显示），则Android浏览器不会像更改DOM那样跟踪UI更改。仅更改CSS，更改和UI活动区域无法正确同步。他们将改变DOM。

因此，如果您使用CSS中的更改显示hight z-index图层，请相应地更改该图层的DOM。这包括一些数据属性中的一些乱码。

评论https://code.google.com/p/android/issues/detail?id=6721#c55也可能有解决方案

禁用：z-index层上的活动伪类

1 个答案: