如何在Opacity为0时隐藏文本元素、大于0时显示？HTML/CSS指导

问题根源 #

opacity: 0 只是让元素视觉透明，但元素仍存在于文档流中，会接收鼠标事件，所以会挡住下方按钮的点击操作。下面给你几个实用的CSS解决方案：

推荐方案 #

方案1：opacity + pointer-events（最常用） #

这个方案能保留元素原有位置，不会导致布局偏移，同时在透明时禁用点击事件，还能添加平滑过渡效果。

先把重复的样式提取成通用类，减少冗余代码：

<content class="content-block description">...</content>
<content class="content-block description2">...</content>

/* 通用基础样式 */
.content-block {
    font-family: Inter;
    z-index: 1;
    font-weight: 200;
    position: fixed;
    color: rgb(255 255 255);
    font-size: 2rem;
    left: 15%;
    bottom: 33%;
    transform: translate(-15%, -33%);
    background-color: rgba(0, 0, 0, 0);
    cursor: default;
    /* 默认显示状态 */
    opacity: 1;
    pointer-events: auto;
    /* 可选：添加过渡动画，让显示/隐藏更自然 */
    transition: opacity 0.3s ease;
}

/* 隐藏状态：透明+禁用点击 */
.content-block.hidden {
    opacity: 0;
    pointer-events: none;
}

/* 如果两个元素有位置/样式差异，单独写在这里 */
.description2 {
    /* 比如修改位置：left: 20%; bottom: 25%; */
}

使用时，给元素添加/移除hidden类就能切换显示状态。

方案2：visibility + opacity（适合严格隐藏交互的场景） #

visibility: hidden 会让元素不可见且不接收点击，同时保留布局空间，配合opacity可以实现平滑过渡：

.content-block {
    /* 通用样式同上 */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.content-block.hidden {
    opacity: 0;
    visibility: hidden;
}

方案3：display: none（无过渡需求时用） #

如果不需要平滑动画，display: none 会彻底把元素从布局中移除，完全不阻挡点击，但切换时会有瞬间的布局变化：

.content-block.hidden {
    display: none;
}

选择建议 #

• 要保留元素位置+平滑过渡：选方案1或2
• 不需要过渡、希望元素彻底从布局中消失：选方案3

内容的提问来源于stack exchange，提问作者ShitiestDevEver