网站问题的 CSS 过渡答案

【问题标题】：CSS Transition for Website Issue网站问题的 CSS 过渡
【发布时间】：2017-08-27 10:00:32
【问题描述】：

.learn-more {
        color: #fff;
        font-size: 20px;
        text-align: center;
        vertical-align: middle;
        text-transform: none;
        max-width: 155px;
        margin: auto;
        background-color: #363636;
        padding: 8px 25px;
        text-decoration: none;
    }

    .learn-more:hover {
        color: #21C8FF;
        transition: .3s ease-in-out;
        -webkit-transition: .3s ease-in-out;
        background-color: #fff;
        text-decoration: none;
    }

&lt;a class="learn-more" href="about.html"&gt;Learn More&lt;/a&gt;

所以我在我的网站上工作，我添加了一个 CSS 过渡，所以当你将鼠标悬停在某个东西上时，它会变成红色。很简单。我只是在使用...

过渡：.3s 缓入出局；

-webkit-transition: .3s 缓入出局；

但是当我取消悬停时，它就会消失。我想添加一个过渡，使其淡化回原来的颜色。有人知道怎么做吗？

谢谢！

小塔

【问题讨论】：

如果你能创建一个小提琴来演示发生了什么会有所帮助
请给我 2 分钟。
已添加到帖子中。

标签： css

【解决方案1】：

您仅为悬停状态指定了转换。如果您希望过渡持续到多个状态，只需将其添加到 .learn-more 类。像这样：

.learn-more {
        color: #fff;
        font-size: 20px;
        text-align: center;
        vertical-align: middle;
        text-transform: none;
        max-width: 155px;
        margin: auto;
        background-color: #363636;
        padding: 8px 25px;
        text-decoration: none;
        /* Moved */
        transition: .3s ease-in-out;
        -webkit-transition: .3s ease-in-out;
    }

    .learn-more:hover {
        color: #21C8FF;
        background-color: #fff;
        text-decoration: none;
    }

&lt;a class="learn-more" href="about.html"&gt;Learn More&lt;/a&gt;

【讨论】：

【解决方案2】：

这是因为您在:hover 状态下使用了转换代码。而是在原始类中使用它。

.learn-more {
  color: #fff;
  font-size: 20px;
  text-align: center;
  vertical-align: middle;
  text-transform: none;
  max-width: 155px;
  margin: auto;
  background-color: #363636;
  padding: 8px 25px;
  text-decoration: none;
  transition: .3s ease-in-out;  // here
  -webkit-transition: .3s ease-in-out;  // here
}

.learn-more:hover {
  color: #21C8FF;
  background-color: #fff;
  text-decoration: none;
}

&lt;a class="learn-more" href="about.html"&gt;Learn More&lt;/a&gt;

【讨论】：

【解决方案3】：

将转换属性直接移动到.learn-more 下并远离:hover 状态。

在此处查看示例：

.the-div {
  width: 200px;
  height: 200px;
  background: limegreen;
  -webkit-transition: 1s ease-in-out;
  -moz-transition: 1s ease-in-out;
  -ms-transition: 1s ease-in-out;
  -o-transition: 1s ease-in-out;
  transition: 1s ease-in-out;
}

.the-div:hover {
  background: #f50;
}

&lt;div class="the-div"&gt;&lt;/div&gt;

【讨论】：