?
Solved

on hoover change button color.

Posted on 2004-11-18
9
Medium Priority
?
1,349 Views
Last Modified: 2012-05-05
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.
0
Comment
Question by:pinaldave
  • 4
  • 2
  • 2
  • +1
9 Comments
 
LVL 18

Expert Comment

by:bruno
ID: 12617290
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
 
LVL 18

Accepted Solution

by:
bruno earned 800 total points
ID: 12617292
<!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
 
LVL 18

Expert Comment

by:bruno
ID: 12617295
Hope that helps, let me know if you have any questions.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 2

Expert Comment

by:zeroreality
ID: 12617362
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
 
LVL 2

Assisted Solution

by:zeroreality
zeroreality earned 600 total points
ID: 12617413
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
 
LVL 18

Assisted Solution

by:arantius
arantius earned 600 total points
ID: 12618095
<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
 
LVL 18

Expert Comment

by:arantius
ID: 12618102
Tested working in FireFox 1.0PR and WinIE 6
0
 
LVL 21

Author Comment

by:pinaldave
ID: 12618894
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
 
LVL 18

Expert Comment

by:bruno
ID: 12621084
thanks and glad we could help
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month14 days, 11 hours left to enroll

839 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