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

Question

我正在寻找平滑隐藏html元素然后将其删除以拒绝与隐藏元素进行任何交互的方法。我改变了css属性＆＃34;不透明度＆＃34;从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