Participant

Answered

CSS for rollover text color change.

Forum|Forum|8 years ago
July 29, 2017
1 reply
1283 views

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 has been closed for replies.

Correct answer Nancy OShea

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 OShea

Community Expert

I assume by links you mean the navigation.

Try this.

nav ul li a:hover {

color:yellow;

text-decoration:underline;

}

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

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;

}

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.

Scanning file for viruses.

This file cannot be downloaded