Solved

text changes color when you mouseover a link

Posted on 2001-06-12
5
170 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

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

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

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

809 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