Introduction: In this article I am going to share how to
highlight HTML input or Asp.Net textbox on mouse hover using jquery i.e. Change background color of textbox on hover. This trick
also works for HTML textarea and asp.net multiline textbox.
In previous articles i explained how to Change background color of Asp.net or HTML TextBox on focus using jQuery and Auto resize textarea or asp.net multiline textbox based oncontent using javascript and Jquery to limit and display number of characters left in multiline textbox and Trick to set maxlength property of multiline textbox and Jquery to replace all spaces with underscores while typingin textbox and Convert text to uppercase or lowercase while typing in textbox using css
Implementation: Let’s create an
example to demonstrate the concept.
HTML Source
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
type="text/javascript">
$(document).ready(function
() {
$(".txt").hover(function
() {
$(this).css("background-color", "#fff4d8");
}, function () {
$(this).css("background-color", "#FFFFFF");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset
style="width:270px;">
<legend>Highlight textbox on hover</legend>
<table>
<tr>
<td>User Name:</td>
<td>
<asp:TextBox ID="txtUserName" CssClass="txt" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password:</td>
<td>
<asp:TextBox ID="txtPassword" TextMode="Password" CssClass="txt" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</fieldset>
</div>
</form>
</body>
</html>
Highlight HTML input controls: If
you want to implement the same for HTML textbox or then just replace the asp.net
textbox controls with html input controls as mentioned below and rest is same:
<input
id=" txtUserName " type="text" class="txt" />
<input
id=" txtPassword " type="password" class="txt"/>
Description: I have assigned a
CSS class "txt" to the controls that I want to highlight on mouse hover and
through jquery I accessed the controls by the assigned class and changed the
background color.
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..