Jump to content

Simple hover over textfield and change text color.


Orionsbelter

Recommended Posts

Ok i am very new to javascript programming, and i'm currently looking for some help on how i can change text when i hover over a textfield

 

For example i have a login form with two rows which has a name an textfield:

 

Username : textfield

Password : textfield

 

Ok so i hover over the textfield of username and it changes the colour of the TEXT Username to red then when i hover out of the box it returns to it usual black.

 

This will need to be applied to both textfields

 

Please help me  :confused:

Link to comment
Share on other sites

Well, I think you really want to be using onfocus/onblur, but I went ahead and wrote this using onmouseover and onmouseout since that is what you stated:

 

<html>
<head>
<script type="text/javascript">

function highlightLabel(fieldObj, labelColor)
{
   var labelObj = document.getElementById(fieldObj.id+'_label');
    labelObj.style.color = labelColor;
}

</script>
</head>

<body>
<label for="username" id="username_label">Username:</label>
<input type="text" id="username" name="username"
    onmouseover="highlightLabel(this, '#ff0000');" onmouseout="highlightLabel(this, '#000000');" />
<br />
<label for="password" id="password_label">Password:</label>
<input type="password" id="password" name="password"
    onmouseover="highlightLabel(this, '#ff0000');" onmouseout="highlightLabel(this, '#000000');" />
<br />
</body>
</html>

Link to comment
Share on other sites

Thank you for this you are very kind, so should i change the onMouse to onBlur?

 

Depends. You said you want it to change color when the mouse hovers over the text field. If that is what you want then use onmouseover/out. But, typically I see that type of functionality for when the user selectes/enters the field.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.