css - 当我将鼠标悬停在我的 div 上时，如何让我的文本消失？

Question

这是 HTML 正文中唯一的内容:

    <div id="box">
        <p id="text"> Enter The Disco! </p>
    </div>

这是我与问题相关的 CSS:

#box:hover{
    -webkit-transform:rotate(360deg);
    opacity:1;
    background-image:url("Logo.jpg");
    width:428px;
    height:208px;
    font-size:38px;
}
#text:hover{
    padding:18% 0% 0% 0%;
    color:red;
}

我想做的是，当我将鼠标悬停在 div 上时，让里面的文本消失。我该怎么做？它已经旋转并改变了背景，但我只想让文字在它完成动画后消失。

Answer 1

您可以使用 color CSS attribute而不是让它不可见，只是让它透明，这应该具有相同的效果:

#text:hover {
  /* other rules */
  color: transparent;
}