不透明度：0（不可见）的 CSS3 元素响应鼠标事件

Question

在 Safari 中使用 Webkit 的 CSS3；我有一个按钮，单击该按钮会导致 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 事件。

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

如果我使用显示样式，那么它会起作用，但不是立即显示动画，而是仅在页面中的其他事件被触发时触发，例如页面上其他位置的另一个按钮。

我想可能会在隐藏后将“指针事件：无”添加到弹出 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/

Answer 2

您可以做的是在不透明度设置为 0 时使用以下样式禁用按钮：

pointer-events: none;
cursor: default;

这样它们就不可点击，并且当光标悬停在按钮所在的位置时光标也不会改变。我需要一个纯 CSS 的解决方案，这对我有用。

Answer 3

如果您将div 的不透明度设置为零，您仍然可以与“不可见”项目进行交互。您想将其设置为 display:none。你可以两者都做，让div 淡出到零，然后在动画完成后添加display:none。