Are HTML tags compatible with jQuery.on ('hover', ...)

Question

It would be nice to fade out or hide the form's input label when the user hovers over the label. In my specific case, I "absolutely" positioned the labels above the input field, so when the user goes through the shortcut or clicks it in the input field, I would like the label to disappear (therefore, their type is not showing the label under the text).

I was able to use CSS to hide the label when I click on text input, but I did not find a way to make a “display: none” shortcut when I hover over (or over the mouse) or something like that.

Here is what I had in mind for jQuery, but couldn't get the hang to work:

<script> $('#userNameLabel').on('hover', function() { $(this).css('display','none'); }); </script> 

HTML:

 <input type="text" id="userName" name="userName" onclick="$('#userNameLabel').css('display','none');"></input> <label id="userNameLabel" for="userName">Username</label> 

Edit: Corrected markup is valid, but the problem remains.

Answer 1

Use .mouseenter . It works great. Demo

 $('#userNameLabel').mouseenter(function() { $(this).css('display','none'); }); 

Or if you want to use .on . Demo

 $('#userNameLabel').on('mouseenter', function() { $(this).css('display','none'); }); 

Answer 2

The .hover() function works here:

 $('#userNameLabel, #userName').hover( function() { $('#userNameLabel').hide(); }, function() { $('#userNameLabel').show(); } ); 

Answer 3

Use this for IE10 +, Chrome, FF:

 <input type="text" name="fname" placeholder="First name">