Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Eric Nevitt
4,914 PointsTransition Menu text
I am trying to build a menu where when the user hovers over the menu the text has a transition between two colors. I've been trying to Google this, but I'm not sure what keywords I should use.
7 Answers
Aaron Graham
18,033 PointsYou can use the css pseudo classes :hover for this. for example
a:hover {
color: some_new_color;
}
or, if you just want text within an element to change:
element_to_change:hover {
color: some_new_color;
}
If you want more information, you could try googling css pseudo classes.
Jason Anello
Courses Plus Student 94,610 PointsHi Eric,
Are you looking for a transition over time?
You can look up the transition property
a {
color: blue;
transition: color 1s 0s linear;
}
a:hover {
color: red;
}
This will transition the color property from blue to red on hover over a duration of 1s, no delay, and a linear timing function.
Eric Nevitt
4,914 PointsJason, that's exactly what I'm looking for. Thanks :)
Eric Nevitt
4,914 Pointsul.nav a {
color:#f9c905;
transition:red 1s 0s linear;
display:block;
padding:0 2.5em;
line-height:2.1em;
text-decoration:none;
border-left:solid 2px #2c9c53;
border-right:solid 2px #f9c905;
}
ul.nav a:hover { color:#2c9c53; background:#ff6621; }
This is the code I have. When I added the transition nothing happened.
Jason Anello
Courses Plus Student 94,610 PointsThe first value you specify for the transition property is the property you want transitioned. You don't want to put a color there.
In this case you want to transition the color property so that's what the 1st value should be.
transition: color 1s 0s linear;
Jason Anello
Courses Plus Student 94,610 PointsAlso, there's a support table here: http://caniuse.com/css-transitions
You can look on that site to see what vendor prefixes might need to be included. You probably don't need any but you could include the webkit prefix to be safe.
Eric Nevitt
4,914 PointsWhere is says color I leave the color right?
Jason Anello
Courses Plus Student 94,610 PointsNot the actual color. You leave the word "color" there. In your example you replaced that word with red but you don't want to do that.
The 1st value that you put there is the name of the property that you want to transition. If you wanted to transition the border-radius instead then it would be transition: border-radius ...
Eric Nevitt
4,914 PointsWhere does the hex color go?
Jason Anello
Courses Plus Student 94,610 PointsNot sure if you have this sorted out yet but the hex codes would go where you have placed them in your css that you posted earlier.
the problem was that you had this for your transition property: transition:red 1s 0s linear;
And it needs to be this: transition:color 1s 0s linear;
I'm re-posting what I originally posted in my answer but with hex colors instead of keyword colors. Maybe that threw you off.
a {
color: #0000ff;
transition: color 1s 0s linear;
}
a:hover {
color: #ff0000;
}
This will transition the link color text from blue to red over a 1 second interval.
I think the "CSS Foundations" course covers transitions. You may want to check that out if you haven't already.