Solved

text changes color when you mouseover a link

Posted on 2001-06-12
5
173 Views
Last Modified: 2010-04-09
What is the code for changing the color of a link when you mouseover? Thanks.
Irwin
0
Comment
Question by:Irwin
5 Comments
 
LVL 19

Expert Comment

by:DreamMaster
ID: 6181731
<html>
<head>
<style>
a { font-family: arial; color:#ffffff; }
a:hover { color: #ff0000; }
</style>
</head>
<body>
<a href="whatever.html">Look..it changes color...but unfortunately only in IE...</a>
</body>
</html>

Cheers,
Max.
0
 
LVL 15

Expert Comment

by:a.marsh
ID: 6181896
IE and Opera only.

A workaround for Netscape can be found:

http://teaink.com/netscapehover.htm

:o)

Ant
0
 
LVL 9

Expert Comment

by:nimaig
ID: 6181908
A:HOVER{color: #FFFF00}

works only with IE

Check this site
     http://www.siteexperts.com/tips/styles/ts31/page2.asp
this gives you example of getting HOVER effect in both IE and Netscape. Try modifing the code to meet
your requirement.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 100 total points
ID: 6182411
This is the basic code for cross-browser mouseover:

<HTML>
<HEAD>
<TITLE> </TITLE>
<style>
   .colorA {color:red;}
   .colorB {color:blue; text-decoration:none;}
   .colorC {color:lime;}
</style>
<SCRIPT>
<!--

   function RollOver (Ltext,lyr,lnk,oldcls,newcls,over)
   {
      var NS=(document.layers) ? true : false;
      var HiLev=(document.getElementById) ? true : false;
      var IE=(document.all) ? true : false;
      var str="<A CLASS='" + newcls + "' HREF='" + lnk + "'";
      if (over)
      {
         str += " onMouseOut=\"RollOver(\'";
      }
      else
      {
         str+= " onMouseOver=\"RollOver(\'";
      }        
      str += Ltext + "\', \'" + lyr + "\',\'" + lnk + "\', \'";
      str += newcls + "\', \'" + oldcls;
      if (over)
      {
         str += "\', false)\">" + Ltext + "</A>";
      }
      else
      {
         str += "\', true)\">" + Ltext + "</A>";
      }
      if (NS)
      {
         with (document.layers[lyr].document)
         {
            open();
            write(str);
            close();
         }
      }
      else
      {
         if (HiLev)
         {
            document.getElementById(lyr).innerHTML=str;
         }
         else
         {
            if (IE)
            {
            document.all[lyr].innerHTML=str;
            }
         }
      }
   }
//-->
</SCRIPT>
</head>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000"
      LINK="#0000FF" VLINK="#800080">
<SPAN ID="div1id" STYLE="position:absolute">
<A CLASS="colorB"
HREF="www.blah1.com"
onMouseOver="RollOver('go to blah','div1id',this.href,'colorB','colorC',true)">
go to blah
</A>
</SPAN>
<BR><BR>
<SPAN ID="div2id" STYLE="position:absolute">
<A CLASS="colorB"
HREF="www.blah2.com"
onMouseOver="RollOver('go to blahblah','div2id',this.href,'colorB','colorA',true)">
go to blahblah
</A>
</SPAN>
<BR><BR>
<SPAN ID="div3id" STYLE="position:absolute">
<A CLASS="colorB"
HREF="www.blah1.com"
onMouseOver="RollOver('NOT here','div3id',this.href,'colorB','colorA',true)">
NOT here
</A>
</SPAN>
<BR><BR>
</BODY>
</HTML>

Note that we have to re-write the code for all because of Netscape 4
even though IE can handle it with styles.  Netscape 4 forces us to
degrade the IE  and NS 6 support for CSS.

Cd&
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6185594
Glad I could help.  Thanks for the A.:^)

Cd&
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to combine and minify CSS and JS files 5 36
CSS Style 8 42
HTML5 storage and web apps 11 44
TypeError jquery issues with site - CSS conflicts 3 25
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question