CSS 具有不透明度的 CSS3 元素：0（不可见）响应鼠标事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4675916/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Element with Opacity:0 (invisible) responds to mouse events
提问by Woodster
CSS3 using Webkit in Safari; I have a button that, when clicked, causes a div to fade in. That div is just a big filled rectangle and it has a few buttons in it, one of whichcauses the same div to fade out.
CSS3 在 Safari 中使用 Webkit；我有一个按钮，当点击它时，会导致 div 淡入。那个 div 只是一个大的填充矩形，里面有几个按钮，其中一个会导致相同的 div 淡出。
The problem is this: When the element has faded out (opacity:0), and I click where one of the buttons was, the onClick is still being fired. In otherwords, even though the button can't be seen (opacity:0) it's still there and is part of the event model. I don't want that.
问题是这样的：当元素淡出（不透明度：0）时，我单击其中一个按钮所在的位置时，仍然会触发 onClick。换句话说，即使按钮不可见 (opacity:0) 它仍然存在并且是事件模型的一部分。我不想要那个。
The buttons call the following functions:
按钮调用以下功能：
// 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";
}
}
The CSS class for the overlay is this:
叠加层的 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;
}
If I don't use the visibility or display settings at all, the animation is fine, but the mouseClick events are triggered for the invisible items.
如果我根本不使用可见性或显示设置，则动画很好，但会为不可见项触发 mouseClick 事件。
If I use the blocks, then it toggles on/off with no animation.
如果我使用块，那么它会在没有动画的情况下打开/关闭。
If I use the display style, then it sort of works but instead of having the animation display immediately, it only triggers once some other event in the page is triggered, like another button elsewhere on the page.
如果我使用显示样式，那么它有点工作，但不是立即显示动画，它只会在页面中的其他一些事件被触发时触发，就像页面上其他地方的另一个按钮一样。
I thought maybe of adding the "pointer-events:none" to the style used by the pop-up div after it's hidden, but what I'm asking for seems like something you'd often encounter with opacity so it must be a semi-frequent problem.
我想可能会在弹出 div 隐藏后将“指针事件：无”添加到弹出 div 使用的样式中，但我所要求的似乎是您经常遇到不透明度的东西，因此它必须是半透明的- 经常出现的问题。
Thoughts?
想法？
采纳答案by Michael Irigoyen
If you're setting your divto have an opacity of zero, you're still going to be able to interact with the "invisible" item. You want to set it to display:noneinstead. You could do both, allowing the divto fade out to zero and then tack on the display:nonewhen the animation has finished.
如果您将div不透明度设置为零，您仍然可以与“不可见”项目进行交互。您想将其设置为display:none。您可以同时执行这两项操作，允许div淡出为零，然后display:none在动画完成时添加 。
回答by aphax
A clean(er?) solution for the problem you are having - which is a common problem for things like tooltips and modal popups with a 'fade-in' effect - is to not only transition between opacity, but also the "visibility" property. Unlike 'display', 'visibility' is an actual animatable property, and it will do the right thing in that it makes the element invisible (and non-responsive to input events) only before a transition begins, and only after a transition returns to the initial state.
您遇到的问题的干净（呃？）解决方案 - 这是工具提示和具有“淡入”效果的模态弹出窗口之类的常见问题 - 不仅是不透明度之间的过渡，而且是“可见性”属性. 与 'display' 不同，'visibility' 是一个实际的动画属性，它会做正确的事情，因为它只在过渡开始之前使元素不可见（并且对输入事件无响应），并且只有在过渡返回到初始状态。
The previously given answer does work, but depends on JavaScript to manipulate properties which may be less desirable. By having all this done through pure CSS, your JavaScript has to do nothing other than set and unset a class on the element that needs to be shown. If you're creating a tooltip, it can be done without any JS at all by making the tooltip a child element and using the 'hover' pseudo-selector on the parent.
先前给出的答案确实有效，但取决于 JavaScript 来操作可能不太理想的属性。通过纯 CSS 完成所有这些工作，您的 JavaScript 只需在需要显示的元素上设置和取消设置一个类即可。如果您正在创建工具提示，则可以通过将工具提示设为子元素并在父元素上使用“悬停”伪选择器来完成，而无需任何 JS。
So for for a popup triggered by clicking on something, you would style it like so:
因此，对于通过单击某些内容触发的弹出窗口，您可以将其样式设置为：
#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;
}
Then your JavaScript can simply toggle the "shown" class.
然后您的 JavaScript 可以简单地切换“显示”类。
A live example: http://jsfiddle.net/y33cR/2/
一个活生生的例子：http: //jsfiddle.net/y33cR/2/
回答by ConorJohn
What you could do is disable the button while the opacity is set to 0 with the following styles:
您可以做的是在使用以下样式将不透明度设置为 0 时禁用按钮：
pointer-events: none;
cursor: default;
This way they aren't clickable and the cursor doesn't change when it hovers over where the button was. I needed a CSS only solution and this worked for me.
这样它们就不可点击，并且光标悬停在按钮所在的位置时也不会改变。我需要一个仅限 CSS 的解决方案，这对我有用。
