我正在显示和隐藏具有淡入/淡出效果的元素。
CSS
.element {
opacity: 1.0;
transition: opacity 0.3s linear;
}
.element.hidden {
opacity: 0.0;
}
JS
// hide
$('someElement').addClassName('hidden');
// show
$('someElement').removeClassName('hidden');
这样做的问题是一个不可见的元素仍然占据空间。如果用户试图点击它下面的东西,这个不可见的元素会拦截点击,用户会感到困惑。是否有一个 CSS 属性会使元素不可交互?我知道有一些技巧,比如top:-999em
在.hidden
课堂上设置,但我问你是否知道任何优雅的解决方案。