Solved

text changes color when you mouseover a link

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

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…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now