如何使透明元素不可交互?

时间:2012-11-05 19:56:26

标签: css

我正在显示和隐藏具有淡入/淡出效果的元素。

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,但我问你是否知道任何优雅的解决方案。

1 个答案:

答案 0 :(得分:4)

您还需要转换visibility

.element {
   opacity: 1.0;
   visibility: visible;
   transition: opacity 0.3s linear, visibility 0.3s linear;
}

.element.hidden {
   opacity: 0.0;
   visibility: hidden;
}

可以点击visibility: hidden的元素;即它不会拦截点击。

如果你需要元素完全消失而不是继续占用空间,你需要使用display: none代替,但这不是一个可动画的属性,所以你会看到元素突然消失而不是消失进行。