Participant

Answered

CSS for rollover text color change.

4 replies
1294 views
Translate

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!

This topic is closed to new replies. Start a new post to keep the conversation going.

Nancy OSheaCorrect answer

Community Expert

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;

}

Nancy O'Shea— Product User & Community Expert

Nancy OShea

Community Expert

I assume by links you mean the navigation.

Try this.

nav ul li a:hover {

color:yellow;

text-decoration:underline;

}

Translate

Nancy O'Shea— Product User & Community Expert

A

alyssad97857465Author

Participant

Thanks Nancy. Yes, the nav.

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

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....

Translate

Nancy OShea

Correct answer

Community Expert

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;

}

Translate

Nancy O'Shea— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.