具有不透明度的CSS3元素:0(不可见)响应鼠标事件

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除此之外什么都不做.如果您正在创建工具提示,则可以通过使工具提示成为子元素并在父级上使用"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可以简单地切换"显示"类.

一个实例:http://jsfiddle.net/y33cR/2/

Answer 2

如果您将div不透明度设置为零,那么您仍然可以与"隐形"项目进行交互.您想要将其设置为display:none.您可以同时执行这两项操作,允许div淡出为零,然后display:none在动画完成时添加.

Answer 3

您可以执行的操作是在不透明度设置为0时使用以下样式禁用按钮:

pointer-events: none;
cursor: default;

这样它们就不会被点击,当光标悬停在按钮所在位置时光标不会改变.我需要一个仅限CSS的解决方案,这对我有用.