如何使用 CSS 过渡更改文本颜色？答案

【问题标题】：How to Change Text Color with CSS Transitions?如何使用 CSS 过渡更改文本颜色？
【发布时间】：2015-05-08 00:14:49
【问题描述】：

有办法吗？我有一个以红色背景、白色边框和白色文本开头的菜单 div。我想将它转换为白色背景和红色文本。我已经改变了背景，但文字不会。我必须使用 JQuery 吗？

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>GEOMETRY</title>
        <link rel="stylesheet" href="infographic.css"/>
    </head>
    <body>
        <p class="h1">GEOMETRY</p>
        <p class="sub">Everything you never wanted to know.</p>
        <p class="mainp">You now when you try to re-visit your high school days, but you just can't? Like when you say to yourself, "Man, I really wish I was sitting in a high school classroom learning trigonometry right now," or, "Jesus, if only I could get someone to give me a bunch of work to do, on topics I'll never remember."</p>
        <p class="mainp">Well now, you've got a complete guiding resource to do it yourself!</p>
        <p class="mainp">Mostly...</p>
        <p class="mainp">This will give you all the information you always wish you never knew about four basic geometry concepts. Know exactly what  you're looking for? Use the buttons to skip ahead.</p>

        <div id="simp">
            <p class="menu">Simplifying Radicals</p>
        </div>
        <div id="pyth">
            <p class="menu">Pythagorean Theorem</p>
        </div>
        <div id="down">
            <div id="arrow"></div>
        </div>
        <div id="sp">
            <p class="menu">Special Triangles</p>
        </div>
        <div id="trig">
            <p class="menu">Trigonometry</p>
        </div>
    </body>
</html>

CSS：

@font-face {font-family: Hip Light; src: url("Fonts/Hipstelvetica UltraLight.ttf");}

body {
    background: #962626;
}

.h1 {
    text-align: center;
    color: white;
    font-family: Hip Light, Courier, Courier New, sans-serif;
    font-size: 100px;
    margin-bottom: 0px;
    margin-top: 70px;
    text-decoration: underline;
}

.sub {
    text-align: center;
    color: white;
    font-family: Courier, Courier New, sans-serif;
    margin-top: 0px;
    margin-bottom: 50px;
    font-size: 20px;
}

.mainp {
    text-align: center;
    color: white;
    font-family: Courier, Courier New, sans-serif;
    margin-left: 20%;
    margin-right: 20%;
}

#simp {
    height: 50px;
    width: 15%;
    float: left;
    margin-left: 6%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
}

#pyth {
    height: 50px;
    width: 15%;
    float: left;
    margin-left: 2%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    tansition: background 1s, color 1s;
    -webkit-transition: background 1s, color 1s;
}

#pyth:hover {
    background: white;
    color: #962626;
}

#down {
    height: 80px;
    width: 6%;
    float: left;
    margin-left: 9%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
}

#sp {
    height: 50px;
    width: 15%;
    float: right;
    margin-right: 6%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
}

#trig {
    height: 50px;
    width: 15%;
    float: right;
    margin-right: 2%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
}

.menu {
    color: white;
    text-align: center;
    font-family: Courier, Courier New, sans-serif;
}

【问题讨论】：

标签： jquery html css

【解决方案1】：

您的 CSS 存在两个问题。

tansition 缺少 r
.menu { color: white; } 正在覆盖文本样式。

这些很容易解决：

body {
    background: #962626;
}
#pyth {
    height: 50px;
    width: 15em;
    float: left;
    margin-left: 2%;
    margin-top: 5px;
    border: 2px solid white;
    border-radius: 10px;
    color:white;
    transition: background 1s, color 1s;
    -webkit-transition: background 1s, color 1s;
}

#pyth:hover {
    background: white;
    color: #962626;
}

.menu {
    text-align: center;
    font-family: sans-serif;
}

<div id="pyth">
  <p class="menu">Pythagorean Theorem</p>
</div>

【讨论】：

【解决方案2】：

我认为您可以简单地按照以下方式进行操作，因为您可能希望拥有所有 transition，包括边框、背景颜色、文本颜色等。最后声明无前缀属性是个好主意。

-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;

你应该最后声明无前缀属性的原因是因为这就是规则中属性级联的方式：浏览器总是使用最后一个适用的。 a 的前缀和无前缀版本就级联而言，属性被视为相同的属性，因此，您希望浏览器在何时尽最大努力遵守标准应用该属性。

如果浏览器实现了前缀而不是标准，那很好，但如果它同时实现，你要确保它使用标准反而。您可以通过最后声明标准属性来做到这一点。 - BoltClock♦

简化演示：

body {
    background: #962626;
}
#E {
    height: 50px;
    width: 200px;
    text-align: center;
    color: white;
    border: 2px solid white;
    border-radius: 10px;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
#E:hover {
    background: white;
    color: #962626;
}

<div id="E">
    <p class="menu">Pythagorean Theorem</p>
</div>

【讨论】：

【解决方案3】：

其实答案很简单。只需在过渡的末尾添加“轻松”即可。像这样：

transition: all 1s ease;

虽然您的当前设置为 1 秒，但我建议设置为 0.5 秒，因为它更快且看起来更好。

【讨论】：