homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Newbie Hover question
Can't get consistency with different browsers

 3:44 am on Oct 30, 2003 (gmt 0)


I'm a newbie to this forum and to CSS so you will have to excuse my lack of knowledge regarding this matter.

I am trying to display a link (white text) as underlined (in white) only when the users mouse is over the keyphrase. From my limited knowledge of CSS i tried to incorporate the following in the head of my document:

<link rel="stylesheet" href="main.css" media="screen">
<style type="text/css"><!--
w { color: white}
w:link{ color: white }
w:visited { color: red }
w:hover { text-decoration: underline }
w:active { color: white }

My link is displayed as the following:

<td width="85" valign="middle" bgcolor="#999966" height="48" align="center"><a href="http://www.myurladdress.com"><w>Keyphrase</w></a></td>

My page will have multiple colored text with similiar corresponding (hover) attributes. For example:

(white - no mouse hovering) keyphrase
(white - white underlined w/ mouse hovering) keyphrase

(black - no mouse hovering) keyphrase
(black - white underlined w/ mouse hovering) keyphrase

(red - no mouse hovering) keyphrase
(red - white underlined w/ mouse hovering) keyphrase

How do I assign css scripts to the above muliple keyphrases?
How would I assign css scripts if I had multiple keyphrases in a table?



 4:25 am on Oct 30, 2003 (gmt 0)

<a href="http://www.myurladdress.com"><w>Keyphrase</w></a>

Instead of using that, try this:

<a href="http://www.myurladdress.com" class="w">Keyphrase</a>

Also, in this case, since you are using "w" as a class, in the css it should be defined like this:

<style type="text/css"><!--
.w:link{ color: white }
.w:visited { color: red }
.w:hover { text-decoration: underline }
.w:active { color: white }

Now, if you want to have ALL of your links on that page do this: instead of ".w" use "a" as in <a href=... This will effect all of your anchor tags.

You may want to check out this site, www.w3schools.com/css/default.asp for some great, easy to understand tutorials on CSS.



 4:37 am on Oct 30, 2003 (gmt 0)

Thanks Jennifer!

Since i'm using multi-colored keyphrases on the same page, can I assign other <B> black <r> red properties similiar to your explanation?


 4:43 am on Oct 30, 2003 (gmt 0)

a.white {color:#ffffff;text-decoration:none;}
a.white:hover {color:#ffffff;text-decoration:underline;}

a.red {color:#FF0000;text-decoration:none;}
a.red:hover {color:#FF0000;text-decoration:underline;}

a.black {color:#000000;text-decoration:none;}
a.black:hover {color:#000000;text-decoration:underline;}

a = anchor
.color = class name


<a class="black">Text</a> will have the black hyperlink that has an underline upon mouseover.

Hope this adds to help.



 4:51 am on Oct 30, 2003 (gmt 0)

Clarifying on your question. Yes, you can.

<a class="black">Link 1</a>
<a class="white">Link 2</a>
<a class="red">Link 3</a>

Can all be in the same paragraph/page/whatever, and have different link appearances, since they call upon the class of the different appearances.



 5:57 am on Oct 30, 2003 (gmt 0)


Thank you for your help and your quick response.


 6:05 am on Oct 30, 2003 (gmt 0)

Anytime. Didn't mean to hijack it from Jennifer though *oops* hehe

Happy trails!



 12:36 pm on Oct 30, 2003 (gmt 0)

That's ok, I was sleeping. ;)

As a sidenote though, you may want to think of using different class names. You may want some text to be black now, but maybe later you'll want it to be green. So, instead of changing all instances of class="black" to class="green", try to describe what the text is, ie .mainText, .itemDescription, etc. that way you'll only have to make one change in your css file.



 9:45 pm on Oct 30, 2003 (gmt 0)

Great tip Jennifer!

So as an example the above code would read:

a.maintext {color:#ffffff;text-decoration:none;}
a.maintext:hover {color:#ffffff;text-decoration:underline;}


<a class="maintext">Text</a>


 4:46 am on Oct 31, 2003 (gmt 0)

Well, you would probably put the href in the anchor tag too, but yes, like that! ;)

Or, even better yet, if you have quite a few links in the .mainText area, instead of adding the class to each link, wrap the main text in a <div> and give that a class="mainText"


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.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved