网站问题的CSS转换

Question

.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;
    }

<a class="learn-more" href="about.html">Learn More</a>

所以我在我的网站上工作，我添加了一个CSS转换，所以当你将鼠标悬停在某个东西上时，它会变成红色。非常简单。我刚刚用...

过渡：.3s轻松进出;

-webkit-transition：.3s easy-in-out;

但是当我解除它时，它就会被切断。我想添加一个过渡，使其淡化回原始颜色。有谁知道怎么做？

谢谢！

TrifleTower

Answer 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;
    }

<a class="learn-more" href="about.html">Learn More</a>

Answer 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;
}

<a class="learn-more" href="about.html">Learn More</a>

Answer 3

直接在.learn-more下移动过渡属性，远离:hover状态。

请在此处查看示例：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="the-div"></div>

＆＃13;

＆＃13;

＆＃13;