...

View Full Version : Change textbox border color on hover



jason_kelly
09-27-2011, 02:34 PM
Hello,

I need your help.

Using Javascript, on mouseover/hover, I would like to change the boder color of my textbox from
rgb(142, 142, 142) to black: rgb(0, 0, 0,) then when I move the mouse pointer off the textbox, I would like it to change from black back to rgb(142, 142, 142).

I can't figure out where to start or how to get this going.

A little help from the experts is needed here.

Much thanks and appreciation for your time.

Cheers,

J

blaze4218
09-27-2011, 03:06 PM
Have you tried google yet? maybe with the search criteria "javascript onmouseover change background"

ironboy
09-27-2011, 05:40 PM
onmouseover and onmouseout has a problem with child elements in some browsers (onmouseout triggers on the child element).

if you are going for a javascript solution i would suggest using jquery's mouseenter and mouseleave events instead, because of this.

the easiest solution in this case, however is to use css



<!DOCTYPE html>
<html>
<head>
<style>
.textbox {width:100px; height:20px;padding:5px;text-align:center} /* just some example styling */
.textbox {border:1px solid #8e8e8e}
.textbox:hover {border:1px solid #000}
</style>
</head>
<body>
<div class="textbox">Hello there</div>
</body>
</html>

xelawho
09-27-2011, 06:26 PM
It is important to specify standards-compliant mode using
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
if :hover is to work on non-anchor elements in Internet Explorer.

(whatever that means)

ironboy
09-27-2011, 06:50 PM
@xelawho:
Indeed it is. Since IE:s logic is that it wil always use it's most ugly old trident engine for rendering in lack of doctype. :thumbsup:

So from now on I'm going to stick the HTML5-doctype before any html-tag when i write examples. :p

muthuarumugam
12-22-2011, 11:36 PM
(whatever that means)

GREAT!! Thanks to xelawho and Philip M

Had the similar issue -> IE8 textbox was not editable (when wrapper of my App has position:absolute). Click worked only in the border. Filled with color and transparent also did not work. With this doctype change the issue is fixed.

I appreciate it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum