Welcome to WebmasterWorld Guest from 54.211.101.8

Forum Moderators: not2easy

Newbie Hover question

Can't get consistency with different browsers

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

10+ Year Member



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?

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

10+ Year Member



<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

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

10+ Year Member



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)

10+ Year Member




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---

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

10+ Year Member



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---

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

10+ Year Member



Jim:

Thank you for your help and your quick response.

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

10+ Year Member



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

Happy trails!

--Jim---

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

10+ Year Member



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

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

10+ Year Member



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>

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

10+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month