pinaldave
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.
.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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hope that helps, let me know if you have any questions.
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.class Name == "submitLink" || mohEvent.srcElement.classN ame == "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-th e-idea" onMouseOver="mouseOverHand ler(event) " onMouseOut="mouseOverHandl er(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
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.class
if (mohEvent.type == "mouseover") {
mohEvent.srcElement.style.
// mohEvent.className = "submitLink"
}
else {
mohEvent.srcElement.style.
// mohEvent.className = "submitLinkOver"
}
}
}
}
</script>
then add this to your <body> tag.
<body otherattibutes="you-get-th
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Tested working in FireFox 1.0PR and WinIE 6
ASKER
Thank you all.
I finally done it with <a href="##" onclick="document.login_ch ild.submit ();" class="blue11"><strong>#ac count_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
I finally done it with <a href="##" onclick="document.login_ch
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
thanks and glad we could help
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