Question

抱歉我可怕的英语。我遇到了CSS和转换的问题。

我需要制作一个div 100px x 100px，这只是一个例子。

当我把光标悬停在它上面时，它应该增长并且是500px x 500px。

在这里，一切都很好并且有效。问题是，当我移除光标时，我需要将div返回到100x100px，但它不会有转换，它只会消失并返回100x100px。我该如何解决这个问题？

这是我使用的代码。

<html>
<head>
  <style>
    div.resize {
      width: 100px;
      height: 100px;
      background: rgb(80,80,80);
      }
      div.resize:hover {
      width: 500px;
      height: 500px;
      transition-duration: 1s;
      }
  </style>
</head>
  <body>
   <div class="resize"></div>
  </body>
</html>

Answer 1

目前你说在悬停时只能有动画。您希望动画在离开元素后反转（不再悬停），但这是不允许的，因为没有悬停的div没有动画集。

只需将transition-duration: 1s放在＆＃39; div.resize＆＃39;而不是在＆＃39; div.resize：hover＆＃39;它是固定的。

Answer 2

你走了。只需将过渡移动到容器而不是:hover。我还为其他浏览器添加了前缀。如果您想了解如何修改过渡，请查看W3 Schools。

＆＃13;

div.resize {
  width: 100px;
  height: 100px;
  background: rgb(80, 80, 80);

  -webkit-transition: all 1s ease; /* Safari and Chrome */
  -moz-transition: all 1s ease; /* Firefox */
  -o-transition: all 1s ease; /* IE 9 */
  -ms-transition: all 1s ease; /* Opera */
  transition: all 1s ease;

}

div.resize:hover {
  width: 500px;
  height: 500px;
}

＆＃13;

<body>
  <div class="resize">
  </div>
</body>

＆＃13;

CSS转出错误

2 个答案: