Different :hover within same main element? [Archive]

TheJoshMan

07-26-2008, 02:16 AM

Ok, so I'm trying to make a "word" where when you hover over it (the link) it changes colors... EASY. However, within the link is a <sup> tag, I want what's inside the <sup> tag to rollover to a different color than the rest when hovered on... I can't seem to figure this one out.

Here's my code:

<HTML>
<HEAD>
<TITLE> SUP Rollover? </TITLE>

<style type="text/css">
body{
background:#353535;
}
.top a, .top a:link, .top a:active, .top a:visited{
font-family:verdana;
font-size:1em;
font-weight:normal;
text-decoration:none;
color:#f9f9f9;
}
.top a:hover{
color:#a4c634;
font-family:verdana;
font-size:1em;
font-weight:normal;
text-decoration:none;
}
.top sup, .top sup a:link, .top sup a:active, .top sup a:visited{
color:#a4c634;
font-family:verdana;
font-size:1em;
font-weight:normal;
text-decoration:none;
}
.top sup a:hover{
color:#f9f9f9;
font-family:verdana;
font-size:1em;
font-weight:normal;
text-decoration:none;
}
</style>
</HEAD>

<BODY>
<div class="top">
<a href="#"><h2>Eight<sup>7</sup>Teen</h2></a>
</div>
</BODY>
</HTML>

As you can see the "main" body of the link is #f9f9f9 upon normal state, then changes to #a4c634 upon ":hover" state. Now, the link itself is:
Eight7Teen
with the number "7" being inside the <sup> tag. I want the "7" to be #a4c634 upon normal state, and #f9f9f9 upon rollover state.

Is this possible within ONE single anchor element?

rangana

07-26-2008, 02:33 AM

Change highlighted:

.top sup a:hover{
color:#f9f9f9;
font-family:verdana;
font-size:1em;
font-weight:normal;
text-decoration:none;
}

to .top a:hover sup

Sidenote, highlighted does'nt makes sense

.top sup, .top sup a:link, .top sup a:active, .top sup a:visited{

<a> element is the parent of <sup> element. So, should be:

.top a:link sup
.top a:active sup
.top a:visited sup

Repectively base on the highlighted.
Hope it helps.