CSS for rollover text color change.

[alyssad97857465]

I have been trying to get my text links to change color from white to yellow upon a rollover, and the css I have tried is not working. Please help!

link: Guilford Garden Center - Where Gardening is Fun!

[Nancy OShea]

I assume by links you mean the navigation.

Try this.

nav ul li a:hover {

     color:yellow;

     text-decoration:underline;

}

[alyssad97857465]

Thanks Nancy. Yes, the nav.

Where should I enter this? Here is my current source:

<style type="text/css">

body {

background-color: #7fbb24;

}

a:link {

color: #FFFFFF;

text-decoration: none;

}

a:visited {

text-decoration: none;

color: #FFFFFF;

}

a:hover {

text-decoration: none;

color: #FFED00;

}

a:active {

text-decoration: none;

color: #FFED00;

}

a {

font-weight: normal;

}

</style>

                    and here is the current nav css:

}

.style-nav ul {

list-style-type: none;

}

.style-nav ul li a {

text-decoration: none;

color: #ffffff;

text-align: center;

display: block;

text-transform: uppercase;

padding: 8px;

}

Thank you for your help. This used to be so easy for me before css... page properties, links, adjust, done. It's taking me a very long time to adjust to everything....

[Nancy OShea · Accepted solution]

You should combine your CSS code into one external stylesheet for easier site management.

Put your navigation styles below the text link styles in this order.

a { font-weight: normal; text-decoration:none}

a:link, a:visited {color: #FFF;}

a:hover, a:active, a:focus {color: #FFED00;}

nav ul { list-style-type: none;}

nav ul li a {

text-decoration: none;

color: #ffffff;

text-align: center;

display: block;

text-transform: uppercase;

padding: 8px;

}

nav ul li a:hover, nav ul li a:active, nav ul li a:focus {

color: yellow;

text-decoration:underline;

}

[alyssad97857465]

Thanks. I'll try that.