asked on

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.

bruno

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

ASKER CERTIFIED SOLUTION

bruno

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

bruno

Hope that helps, let me know if you have any questions.

zeroreality

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

SOLUTION

zeroreality

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

arantius

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

arantius

Tested working in FireFox 1.0PR and WinIE 6

pinaldave

ASKER

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

bruno

thanks and glad we could help