Special Case Links [Archive] - WebDeveloper.com

xeonman9000

03-16-2007, 06:02 PM

Hello,
I have in my style sheet, a long section dedicated to my "menulinks", I have two lots of menu links, one as defined in the stylesheet, the other as defined but with a different hove colour. How can I achieve this without re-creating the entire class with that one different property? I tried this:

<a href="" class="menulinks" style="a:hover{color: #6994f5;}">Click</a>

But it didn't work. Here's the rest of the Links Style section:

/* MENU LINKS */

a:link.menulinks{

font-family: arial, sans-serif;
color: #ffffff;
font-size: 13pt;
font-weight: bold;
text-decoration: none;
}

a:visited.menulinks{

font-family: arial, sans-serif;
color: #ffffff;
font-size: 13pt;
font-weight: bold;
text-decoration: none;
}

a:hover.menulinks{

font-family: arial, sans-serif;
color: #2c29b9;
font-size: 13pt;
font-weight: bold;
text-decoration: none;
}

a:active.menulinks{

font-family: arial, sans-serif;
color: #ff9314;
font-size: 13pt;
font-weight: bold;
text-decoration: none;
}

WebJoel

03-16-2007, 06:23 PM

Extrapolate upon this example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small;}
/*font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.2em; margin-top:6px;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em; margin-top:12px;}
h2{font-size: 1.72em; margin-top:12px;}
h3{font-size: 1.52em; margin-top:12px;}
h4{font-size: 1.42em; margin-top:12px;}
h5{font-size: 1.32em; margin-top:12px;}
h6{font-size: 1.21em; margin-top:12px;}

#navigation {width:500px;}
#navigation ul {}
#navigation ul li {display:inline; margin:0 10px 0 10px;}
#navigation ul li a {font-size:1.5em; text-decoration:none; font-weight:bold;}
#navigation ul li a:hover {color:red; text-decoration:underline;}
#navigation ul li.special a:hover {color:green; text-decoration:underline;}
</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>

<div id="navigation">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li class="special"><a href="#">Four</a></li>
<li class="special"><a href="#">Five</a></li>
<li><a href="#">Six</a></li>
<li><a href="#">Seven</a></li>
</ul>

</body>
</html> :)