CSS 按钮过渡

Question

我是 HTML 和 CSS 的新手。在我创建的第一个网站中，我遇到了 CSS 转换的问题。我想要发生的是，当您将鼠标悬停在上面时，文本和背景颜色会发生变化，而当您将鼠标移开时，也会发生同样的情况。但是，CSS 转换中的一个似乎覆盖了另一个。我无法让它们在鼠标关闭时同时转换。我只是遗漏了什么，还是比 "transition: color 0.5s" 更复杂？它必须以某种方式成为可能。

看看我的意思。这里：(http://jsfiddle.net/SeanWhelan/oz0amfL7/)

这是按钮的代码：

.btn {
background-color: #333;
color: #fff;
padding: 10px 35px;
text-decoration: none;
text-transform: none;
transition: color 0.5s; }

.btn:hover {
background: #87ff00;
cursor: pointer; 
transition: background-color 0.5s;
color: #333; }

如果有一个非常简单的方法，我很抱歉，几天前才开始学习 HTML 和 CSS。

Answer 1

试一试：

.btn {
background-color: #333;
color: #fff;
padding: 10px 35px;
text-decoration: none;
text-transform: none;
transition: color .5s, background-color .5s; }

.btn:hover {
background: #87ff00;
cursor: pointer; 
color: #333; }

转换语句会相互覆盖。您可以用逗号分隔要转换的各种属性，也可以使用 all 关键字来定位所有属性。

CSS 按钮过渡

CSS Button Transitions

html

css

transitions