onmouseover

@grindsky88Oct 21.2010

Hi i would like to be able to change the colour of my textbox when I move my cursor over the textbox and similarly goes back to the normal colour when moving off this.

Can anyone give me the code for this please.

to post a comment

JavaScript

@BIOSTALLOct 21.2010 — #A quick example of this would be like so:

[code=html]<input type="text" name="txtSample" value="" onmouseover="this.style.backgroundColor='#900'" onmouseout="this.style.backgroundColor='#FFF'" />[/code]

Or, if you're using jQuery you could do something like this:

[code=html]<script type="text/javascript">
 $("#txtSample").hover(
 function() { $(this).css("backgroundColor", "#900"); },
 function() { $(this).css("backgroundColor", "#FFF"); }
 );
 </script>
 <input type="text" name="txtSample" id="txtSample" value="" />[/code]

Alternatively I believe you could do this using CSS as per the example below:

[code=html]<style type="text/css">
 #txtSample:hover { background-color:#900 }
 </style>
 <input type="text" name="txtSample" id="txtSample" value="" />[/code]

I haven't tested these but they should work ? Hope that helps

@jcoc611Oct 21.2010 — #Good job!

I wonder which one is more lightweight...or more cross-compatible...probably the CSS one?

@JavaboeyOct 22.2010 — #Use the CSS option. If users have JavaScript turned off, it will still work.

@FangOct 22.2010 — #If you want to support IE6, the css solution isn't enough; add a htc: http://www.xs4all.nl/~peterned/csshover.html

@jcoc611Oct 22.2010 — #does the JavaScript one work in IE6 tho?

lol I wonder how many GB's of code would be saved if IE didn't exist...

@JavaboeyOct 22.2010 — #The JavaScript version should work in IE6, but most people don't worry about IE6 anymore. Unless you're building a site for a huge corporation who uses IE6 because it would take a lot of man-hours to update their systems, don't even worry about IE6. It's dead - thank god.

@jcoc611Oct 22.2010 — #All IEs should be dead...

onmouseover

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

onmouseover

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴