css - 是否可以使用 css 属性选择器和属性显示顺利隐藏 html 元素并删除它 :none?

Question

我正在寻找平滑隐藏 html 元素然后将其完全删除以拒绝与隐藏元素进行任何交互的方法。我将 css 属性“opacity”从 1 更改为 0.00001 来执行此操作。问题是元素隐藏了，但它仍然在屏幕上，用户可以悬停它。是否可以使用 display:none 没有 JavaScript 来删除透明元素？我尝试使用 CSS 属性选择器来做到这一点，但它不起作用。

.element[opacity^=0.00001] {
    display:none;
}

http://jsfiddle.net/DkX3L/

Answer 1

由于您可能已经在使用 JavaScript 来隐藏元素，最好的方法是也使用它来停止交互。但是既然你要求一个 CSS 解决方案，你可以使用这个(IE11+):

.element {
    -webkit-transition: 2s;
    transition: 2s;
}
.element:hover { /* .element.hidden */
    opacity: 0;
    pointer-events: none; /* <-- This one */
}

DEMO