homepage Welcome to WebmasterWorld Guest from 107.22.70.215
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
CSS a:hover question
RussellC




msg:1215227
 4:07 pm on Oct 4, 2002 (gmt 0)

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




msg:1215228
 4:16 pm on Oct 4, 2002 (gmt 0)

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




msg:1215229
 4:34 am on Oct 9, 2002 (gmt 0)

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




msg:1215230
 8:42 am on Oct 9, 2002 (gmt 0)

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




msg:1215231
 10:34 pm on Nov 6, 2002 (gmt 0)

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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved