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

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
utagonzo

10+ Year Member



 
Msg#: 2137 posted 3:44 am on Oct 30, 2003 (gmt 0)

Hello:

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 }
--></style>

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?

 

RammsteinNicCage

10+ Year Member



 
Msg#: 2137 posted 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 }
--></style>

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.

Jennifer

utagonzo

10+ Year Member



 
Msg#: 2137 posted 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?

Speeeedy

10+ Year Member



 
Msg#: 2137 posted 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

In HTML:

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

Hope this adds to help.

--Jim---

Speeeedy

10+ Year Member



 
Msg#: 2137 posted 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.

--Jim---

utagonzo

10+ Year Member



 
Msg#: 2137 posted 5:57 am on Oct 30, 2003 (gmt 0)

Jim:

Thank you for your help and your quick response.

Speeeedy

10+ Year Member



 
Msg#: 2137 posted 6:05 am on Oct 30, 2003 (gmt 0)

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

Happy trails!

--Jim---

RammsteinNicCage

10+ Year Member



 
Msg#: 2137 posted 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.

Jennifer

utagonzo

10+ Year Member



 
Msg#: 2137 posted 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;}

In HTML:

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

RammsteinNicCage

10+ Year Member



 
Msg#: 2137 posted 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"

Jennifer

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