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

Question

It would be nice to be able to fade or hide a form's input label when a user hovers over the label. In my particular case, I've 'absolutely' positioned the labels on top of the input box, so when a user mouses over the label OR clicks into the input box, I would like the label to disappear (so their type isn't showing beneath the label text).

I was able to use CSS to hide the label on click of the text input, but have not found a way to make the label 'display:none' when hovered (or mouse overed) or something similar.

Here's what I had in mind for the jQuery, but have not been able to get the hover 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: Adjusted markup to be valid, but issue remains.

Answer 1

Use .mouseenter. It works just fine. 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

Here's how the .hover() function works:

$('#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">