How to Change Text Color with CSS Transitions?

Question

Is there a way? I've got a menu div that starts out with a red background, white border and white text. I want to transition it to a white background and red text. I've gotten the background to change, but the text won't. Am I going to have to use 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;
}

score 3 · Accepted Answer · answered May 06 '15 at 23:47

There are two problems with your CSS.

tansition is missing an r
.menu { color: white; } is overriding the text style.

These are easily fixed:

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>

score 2 · Answer 2 · edited May 23 '17 at 12:30

I think you could simply do it as the follows, since it's likely that you want to have all the transition including border, background color, text color etc. And it's a good idea to declare the unprefixed property last.

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

The reason why you should declare the unprefixed property last is because that's how properties cascade in a rule: a browser will always use the last applicable one. Prefixed and unprefixed versions of a property are treated as the same property with respect to the cascade, so you want a browser to do its best to adhere to the standards when applying that property.

If a browser implements a prefix but not the standard, that's fine, but if it implements both, you want to ensure it uses the standard instead. You do this by declaring the standard property last. - BoltClock♦

Simplified Demo:

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>

score 0 · Answer 3 · answered May 06 '15 at 23:53

0

Actually, the answer is pretty simple. Just add 'ease' to the end of your transitions. Like so:

transition: all 1s ease;

Although yours is currently set to 1 second, I recommend doing 0.5s just because it's faster and looks better.

answered May 06 '15 at 23:53

Pizza Day

16
2

How to Change Text Color with CSS Transitions?

3 Answers3

Linked