不透明度为 :0 (invisible) responds to mouse events 的 CSS3 元素

Question

CSS3 在 Safari 中使用 Webkit；我有一个按钮，单击该按钮会导致一个 div 淡入。该 div 只是一个大的填充矩形，其中有几个按钮，其中一个按钮会使同一个 div 淡出。

问题是这样的:当元素淡出(不透明度:0)，并且我单击其中一个按钮所在的位置时，onClick 仍在触发。换句话说，即使看不到按钮(不透明度:0)，它仍然存在并且是事件模型的一部分。我不想要那个。

按钮调用以下函数:

//  This displays the overlay (popup)
function showCategoryPopup() {

 // Was playing with the following, but with no success.
 //  popupCategory.style.display = "block";
 //  popupCategory.style.visibility = "visible";

 // Change the attributes that will be animated.
 popupCategory.style.opacity = 1; 
 popupCategory.style.webkitTransform = "scale(1.0)";
}

function hideCategoryPopup() {
 // Change the animated attributes
 popupCategory.style.opacity = 0; 
 popupCategory.style.webkitTransform = "scale(0.7)"; 


// Even if opacity is 0, we still get mouse events.  So, make it hidden?
//    popupCategory.style.visibility = "hidden";
//    popupCategory.style.display = "none";     

叠加层的 CSS 类是这样的:

.popupContainer {
    opacity: 0;
    -webkit-transform: scale(0.7);
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial;
}

如果我根本不使用可见性或显示设置，动画效果很好，但会为不可见元素触发 mouseClick 事件。

如果我使用积木，它会在没有动画的情况下打开/关闭。

如果我使用显示样式，那么它可以工作，但它不会立即显示动画，它只会在页面中的其他事件被触发时触发，就像页面其他地方的另一个按钮一样。

我想也许可以将“pointer-events:none”添加到弹出 div 隐藏后使用的样式，但我要求的似乎是你经常遇到的不透明度问题，所以它必须是半频问题。

想法？

Answer 1

针对您遇到的问题的干净(呃？)解决方案 - 这是工具提示和具有“淡入”效果的模式弹出窗口之类的常见问题 - 不仅是在不透明度之间转换，而且“可见性”属性。与'display'不同，'visibility'是一个实际的动画属性，它会做正确的事情，因为它只在转换开始之前和转换返回到之后才使元素不可见(并且对输入事件不响应)初始状态。

先前给出的答案确实有效，但依赖于 JavaScript 来操作可能不太理想的属性。通过纯 CSS 完成所有这些操作，您的 JavaScript 只需在需要显示的元素上设置和取消设置类即可。如果您正在创建工具提示，则可以通过将工具提示作为子元素并在父元素上使用“悬停”伪选择器来完全不使用任何 JS 来完成。

因此对于通过点击某物触发的弹出窗口，您可以这样设置它的样式:

#popup
{
  /* ...cosmetic styling, positioning etc... */

  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;

  opacity: 0;
  visibility: hidden;
}

#popup.shown
{
  opacity: 1;
  visibility: visible;
}

然后您的 JavaScript 可以简单地切换“显示”类。

一个活生生的例子:http://jsfiddle.net/y33cR/2/