是否可以平滑地隐藏html元素并使用css属性选择器和属性display:none来删除它?

Question

我正在寻找一种方法来平滑地隐藏html元素，然后将其删除，以拒绝与隐藏元素的任何交互。我改变css属性"不透明度"从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 */
}