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上时，div中的文字会消失，我该怎么做？它已经旋转并改变了背景，但我只是希望文本在完成动画后消失。

Answer 1

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

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

Answer 2

你也可以使用不同的方式。它很容易像另一种解决方案：

#text:hover {
display:none;
}

Answer 3

让它消失是没有问题的：使用display：none，opacity：0，visibility：hidden或color：transparent;但是在动画之后隐藏它？这似乎有点困难。我不认为没有javascript就可以这样做：

<div id="box" onmouseover="spin();">
  <p id="text"> Enter The Disco! </p>
</div>

<script type="text/javascript">
  var i; var rotate;

  function spin() {
    i = 180; rotate = setInterval("spinInterval()",3);
  }

  function spinInterval() {
    document.getElementById('box').style.WebkitTransform = "rotate("+ i +"deg)";
    document.getElementById('box').style.MozTransform = "rotate("+ i +"deg)";
    document.getElementById('box').style.OTransform = "rotate("+ i +"deg)";
    document.getElementById('box').style.Transform = "rotate("+ i +"deg)";
    i++;
    if(i>360) {
      document.getElementById("text").style.opacity = 0;
      clearInterval(rotate);
    }
  }
</script>

PS：这适用于所有浏览器，不仅适用于Chrome：）

当我将鼠标悬停在div上时，如何让文字消失？

3 个答案: