Question

.topnav {
    background: grey;
}

.topnav li {
    list-style: none;
    color: white;
    display: inline;
    padding: 10px;
    margin: 30px;
}

li:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transition-timing-function: ease-out;
    transition: 0.4s;
}

<ul class="topnav">
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Sit</li>
    <li>Amet</li>
</ul>

我的网站开头有一个顶部导航栏。将鼠标悬停在按钮上时，背景会平滑地改变颜色。但是，当您将指针从按钮中移出（停止悬停）时，背景将立即更改为其默认值。

如何告诉我的CSS文件我希望背景颜色返回SMOOTHLY到其默认值而不是突然结束？

Answer 1

您可以将动画（过渡）添加到非悬停状态...因此它会在悬停和取消悬停时发生。见这里：

.topnav li {
  list-style: none;
  color: white;
  float: right;
  display: inline;
  border: 1px white solid;
  border-radius: 12px;
  padding: 10px;
  position: relative;
  margin: 30px;
  text-align: center;
  transition-timing-function: ease-out;
  transition: 0.4s;
}

li:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

https://jsfiddle.net/Garconis/buc80c7m/

我的动画突然结束了CSS

1 个答案: