HTML、JS 和 CSS 如何在 Opacity = 0 时隐藏文本并在 Opacity > 0 时取消隐藏？

Question

我目前正在设计一个网页，上面有两个内容元素，当它们的不透明度设置为 0 时，我想隐藏它们。当用户尝试单击其他按钮时，这些元素会妨碍。为此，我计划使用 HTML 和 CSS 代码来控制内容元素的可见性。但是，我不确定实现这个的最佳方法。当使用 HTML 和 CSS 将元素的不透明度设置为 0 时，您能否提供一些有关如何有效隐藏元素的指导？ HTML:

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

CSS：

.description {
    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: rgb(0, 0, 0, 0.00);
    cursor: default;
}

.description2 {
    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: rgb(0, 0, 0, 0.00);
    cursor: default;
}

Answer 1

除了

opacity: 0

之外，您可以考虑使用

pointer-events

CSS属性。当它被设置为

none

时，它允许元素表现得好像它不能处理任何事件/交互。 （即使您在

opacity

属性上有过渡/动画，这也能很好地工作）

另一个选项是

visibility

CSS 属性，它也不会影响布局。但是，它不适用于过渡/动画