Forum Moderators: not2easy

Message Too Old, No Replies

CSS Rollover Text Color Change.

rollover issue where text color doesn't change after link's been visited

         

dgriff80

5:00 pm on Mar 11, 2010 (gmt 0)

10+ Year Member



Hello all!

I have a site I built that the end users are going to be primarily elderly with dial-up modems in the middle of nowhere so virtually everything is done with text rather than images. What I have are menu items that are text-based, a <a> tags like this:

<div id="menu">
<div class="menuItem"><a href="?">home</a></div>
<div class="menuItem"><a href="?p=faq">FAQ</a></div>
<div class="menuItem"><a href="?p=findstaff">find staff</a></div>
<div class="menuItem"><a href="?p=findajob">find a job</a></div>
<div class="menuItem"><a href="?p=contactus">contact us</a></div>
</div>


In the styles.css I have this:


div.menuItem a { color: #666; text-decoration: none; }
div.menuItem a:hover { color: #900; text-decoration: none; }
div.menuItem a:active { color: #666; text-decoration: none; }
div.menuItem a:visited { color: #666; text-decoration: none; }



I want the text to be gray, and upon rollover be dark red. The issue is that once you have clicked the link, the rollover for that button doesn't work. Any ideas?

Thanks,

Dan

rocknbil

8:26 pm on Mar 11, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome aboard dgriff80, change a to a:link and order them in L-O-V-E-H-A-T-E order.

div.menuItem a:link { color: #666; text-decoration: none; }
div.menuItem a:visited { color: #666; text-decoration: none; }
div.menuItem a:hover { color: #900; text-decoration: none; }
div.menuItem a:active { color: #666; text-decoration: none; }

Second, know that div and span are generic elements. A navigation is a list of links. Use ul/li, etc. Working example that is identical to what you posted, but lends semantic meaning to the elements:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype all on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
#menu, #menu li { margin:0; padding:0; list-style:none; }
#menu a:link { color: #666; text-decoration: none; }
#menu a:visited { color: #666; text-decoration: none; }
#menu a:hover { color: #900; text-decoration: none; }
#menu a:active { color: #666; text-decoration: none; }
</style>
</head>
<body>
<ul id="menu">
<li><a href="?">home</a></li>
<li><a href="?p=faq">FAQ</a></li>
<li><a href="?p=findstaff">find staff</a></li>
<li><a href="?p=findajob">find a job</a></li>
<li><a href="?p=contactus">contact us</a></li>
</ul>
</body>
</html>



Note also it's recommended that the visited state is always a different color than the link state. If this is supposed to be a horizontal menu, you'd apply display:inline or float to the list elements.