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

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;
}

如果我根本不使用“可见性”或“显示”设置，动画就可以了，但会为不可见项触发鼠标单击事件

如果我使用块，那么它将在没有动画的情况下打开/关闭

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

我想在弹出div隐藏后，在其使用的样式中添加“指针事件：无”，但我所要求的似乎是您经常遇到的不透明问题，因此这一定是一个半频繁的问题

---

想法？

如果将

div

的不透明度设置为零，则仍可以与“不可见”项交互。您希望将其设置为

display:none

。您可以同时执行这两项操作，允许

div

淡出为零，然后在动画完成后在

显示屏上加上标记：none

。

对于您遇到的问题，一个干净（er？）的解决方案——这是工具提示和具有“淡入”效果的模式弹出窗口等常见问题——不仅是在不透明度之间转换，还有“可见性”属性。与“显示”不同，“可见性”是一个实际的可设置动画的属性，它将做正确的事情，因为它仅在转换开始之前，并且仅在转换返回初始状态之后，才使元素不可见（并且对输入事件无响应）

前面给出的答案确实有效，但依赖于JavaScript来操作可能不太理想的属性。通过纯CSS完成所有这些操作，JavaScript只需在需要显示的元素上设置和取消设置一个类。如果您正在创建工具提示，则可以通过将工具提示设置为子元素并在父元素上使用“hover”伪选择器，而无需任何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可以简单地切换“Showed”类

---

一个活生生的例子：

当不透明度设置为0时，您可以使用以下样式禁用按钮：

pointer-events: none;
cursor: default;

---

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

True。您应该将不透明度：0元素视为由玻璃制成：）display:none//display:block用于解决鼠标单击的问题，但不透明度不会从1设置为0。潜水艇只是时断时续。这就是display:属性的问题所在。在设置不透明度为0之前和之后，我都尝试过设置display:none，但我相信（？）函数的结果在调用函数后会大量应用，这会使块消失而不是消失。我还需要做些什么，以便在不透明动画完成后设置块？@Woodster我建议您考虑使用jQuery实现类似的功能。内置动画效果（如淡出）易于使用

fadeOut

淡出任何内容，然后将其设置为

display:none

开箱即用。更新：jQuery完全是解决这个问题的一个很好的方法。所以很更容易的。向上投票。

display

不是CSS转换支持的属性，更改display属性将导致切换效果而不是转换效果<代码>可见性是您想要使用的。这非常好。很好地解释了可见性转换语义。非常详细（但由于使用了转换延迟而过于复杂）。很好地使用可见性，谢谢，我不知道可见性隐藏的元素不会触发事件。我欣赏代码中的不透明性。根据答案的措辞，我理解这意味着我可以设置可见性动画，它可以实现你所期望的效果。虽然这是一种方法，但当在带有视频元素的弹出窗口中使用它时，我遇到了一些奇怪的Safari bug，最好使用可见性参数的动画，这似乎在所有当前浏览器上都更有效。这应该是公认的答案，因为这是实现OP要求的最优雅的方式（+为我工作）。