CSS a:hover question

[RussellC]

I am creating a new site and instead of having image buttons with onmouseover rollovers as the side navbar I am going to create CSS "buttons". ALl they really are is text menu like this:

HOME
LINK HERE
sub link here
possible sub
link two
LINK HERE
ALSO HERE
ETC

now my question is this, I have it all set up in css to do it this way and it works great, I was wondering how I could go about actually changing the text on a:hover. For example: I would like to make the seleted menu item have a carrot next to it like this:

HOME
LINK HERE <
sub link here
link two
LINK HERE
ALSO HERE
ETC

Is that possible without using images?

Thanks.

[Nick_W]

No. ;)

There are a couple of CSS features that I think in theory might do this but the reason I don't even remember what they are is that they are almost unanimously unsupported :(

I'd try using a background img and putting some padding on the text to make sure it clears the img..

Nick

[GuanoLad]

If you have the carrot the same colour as the background just with a simple font color tag, the hover colour will override it.

I think.

[tedster]

That's a good approach, GuanoLad. I haven't tested it, but it "should" work.

As a fallback plan, even if a:hover doesn't override in some browsers, you could DEFINE a class with a rule for the desired a:hover behavior and use it in a span tag around the caret.

[MikeG]

Do you mean like this: <sorry, no urls>?

Create styles for on/off states:

.NAVoff {color:#FFFFFF; background-color:#FFFFFF; text-decoration:none}
.NAVoff a:link {color:#000000; background-color:#FFFFFF; text-decoration:none}
.NAVoff a:visited {color:#000000; background-color:#FFFFFF; text-decoration:none}

.NAVon {color:#0000CC; background-color:#FFFFFF; text-decoration:none}
.NAVon a:link {color:#FF0000; background-color:#FFFFFF; text-decoration:none}
.NAVon a:visited {color:#FF0000; background-color:#FFFFFF; text-decoration:none}

Then in the navigation table cell type a "> " (&gt;) before/" <" after your link text -- JUST DONT LINK THE CARATS:

<td class="NAVoff" onMouseOut="ChangeStyle(this,'NAVoff')" onMouseOver="ChangeStyle(this,'NAVon')">&gt; <a href="page.html">Page Link</a></td>

The mouseover script is:

<script language="JavaScript">
<!--
function ChangeStyle(obj, new_style) {
obj.className=new_style;
}
//-->
</script>

[edited by: tedster at 11:19 pm (utc) on Nov. 6, 2002]