on hoover change button color.

Hello Experts,
.submitLink {
       color: #0066CC;
       background-color: transparent;
       text-decoration: underline;
       border: none;
       cursor: pointer;
       cursor: hand;
       FONT-SIZE: 11px;
       FONT-FAMILY: Verdana,Arial,Helvetica;
       TEXT-DECORATION: Underline;
}

This is my stylesheet.
What I want is when mouse hoover I want to change the color of the my button as follows:

.submitLink {
       color: #000000;
       background-color: transparent;
       text-decoration: underline;
       border: none;
       cursor: pointer;
       cursor: hand;
       FONT-SIZE: 11px;
       FONT-FAMILY: Verdana,Arial,Helvetica;
       TEXT-DECORATION: Underline;
}

This is my html code for button: <input type="submit" value="Login" class ="submitLink">

Thank you in advance.
LVL 21
pinaldaveAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

brunoCommented:
Hi pinaldave,

in browsers such as Firefox, you can just do this:


.submitLink {
      color: #0066CC;
      background-color: transparent;
      text-decoration: underline;
      border: none;
      cursor: pointer;
      cursor: hand;
      FONT-SIZE: 11px;
      FONT-FAMILY: Verdana,Arial,Helvetica;
      TEXT-DECORATION: Underline;
}

.submitLink:hover {
      color: #000000;
      background-color: transparent;
      text-decoration: underline;
      border: none;
      cursor: pointer;
      cursor: hand;
      FONT-SIZE: 11px;
      FONT-FAMILY: Verdana,Arial,Helvetica;
      TEXT-DECORATION: Underline;
}



if you want to support IE as well, you'll need to use javascript - i'll post the code in my next comment






bruno
0
brunoCommented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title></title>
   
    <style type="text/css" media="screen" title="SCREENstyle">
.submitLink {
      color: #0066CC;
      background-color: transparent;
      text-decoration: underline;
      border: none;
      cursor: pointer;
      cursor: hand;
      FONT-SIZE: 11px;
      FONT-FAMILY: Verdana,Arial,Helvetica;
      TEXT-DECORATION: Underline;
}

.submitLinkOver {
      color: #000000;
      background-color: transparent;
      text-decoration: underline;
      border: none;
      cursor: pointer;
      cursor: hand;
      FONT-SIZE: 11px;
      FONT-FAMILY: Verdana,Arial,Helvetica;
      TEXT-DECORATION: Underline;
}
    </style>    
</head>

<body>

<input type="submit" value="Login" class ="submitLink" onmouseover="this.className='submitLinkOver';" onmouseout="this.className='submitLink';">

</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brunoCommented:
Hope that helps, let me know if you have any questions.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

zerorealityCommented:
I use this code on the website's i program

add this to your .js file or in the <head>

<script>
//--- handle the buttons colour change --------------------------
function mouseOverHandler(mohEvent) {
      if (mohEvent.srcElement) {
            if (mohEvent.srcElement.className == "submitLink" || mohEvent.srcElement.className == "submitLinkOver") {
                  if (mohEvent.type == "mouseover") {
                        mohEvent.srcElement.style.color = "#000000"
                        // mohEvent.className = "submitLink"
                  }
                  else {
                        mohEvent.srcElement.style.color = "#0066CC"
                        // mohEvent.className = "submitLinkOver"
                  }
            }
      }
}
</script>


then add this to your <body> tag.

<body otherattibutes="you-get-the-idea" onMouseOver="mouseOverHandler(event)" onMouseOut="mouseOverHandler(event)">


you can also use the className instead of just changing the difference in styles like i do... but IE reacts VERY slowly to changing classNames with a font-anything is used.  dont know why
0
zerorealityCommented:
you can also use this...

<style>
.submitLink {
      color: #0066CC;
      background-color: transparent;
      text-decoration: underline;
      border: none;
      cursor: pointer;
      cursor: hand;
      FONT-SIZE: 11px;
      FONT-FAMILY: Verdana,Arial,Helvetica;
      TEXT-DECORATION: Underline;
}
.submitLink:hover {
}
</style>

but that will only work in Firefox/Mozilla/Netscape 6+... not in IE.
0
arantiusCommented:
<html>
<head>
<style>
.submitButton, .activeSubmitButton {
      color: #0066CC;
      background-color: transparent;
      text-decoration: underline;
      border: none;
      cursor: pointer;
      cursor: hand;
      FONT-SIZE: 11px;
      FONT-FAMILY: Verdana,Arial,Helvetica;
      TEXT-DECORATION: Underline;
}

.activeSubmitButton {
      color: #000000;
}
</style>
</head>
<body>

This is some text and click here to submit:
<input type="submit" value="Login" class ="submitButton"
      onMouseOver="javascript:this.className='activeSubmitButton';"
      onMouseOut="javascript:this.className='submitButton';"
>

</body>
</html>
</html>
0
arantiusCommented:
Tested working in FireFox 1.0PR and WinIE 6
0
pinaldaveAuthor Commented:
Thank you all.
I finally done it  with <a href="##" onclick="document.login_child.submit();" class="blue11"><strong>#account_id_2#</strong></a>
Thank you all of you for participating.
Though, I have not used any of the suggestion up there they are really working and gave me good thouthts and I thank you for that.
Regards,
---Pinal
0
brunoCommented:
thanks and glad we could help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.