Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    190
    Thanks
    143
    Thanked 0 Times in 0 Posts

    Change textbox border color on hover

    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

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Have you tried google yet? maybe with the search criteria "javascript onmouseover change background"

  • Users who have thanked blaze4218 for this post:

    jason_kelly (09-27-2011)

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    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

    Code:
    <!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>
    Last edited by ironboy; 09-27-2011 at 07:47 PM.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by Philip M View Post
    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)

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Location
    Sweden
    Posts
    154
    Thanks
    1
    Thanked 22 Times in 22 Posts
    @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.

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

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up GREAT!! Thanks to xelawho and Philip M

    Quote Originally Posted by xelawho View Post
    (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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •