HTML 标签是否与 jQuery .on('hover',...) 兼容

Question

当用户将鼠标悬停在表单的输入标签上时，如果能够淡出或隐藏表单的输入标签，那就太好了。在我的特殊情况下，我已经"绝对"将标签定位在输入框的顶部，所以当用户将鼠标放在标签上或单击输入框时，我希望标签消失(因此他们的类型不会显示在标签文本下面)。

我能够使用CSS隐藏标签点击文本输入，但还没有找到一种方法，使标签'display:none'当悬停(或鼠标覆盖)或类似的东西。

这是我对jQuery的想法，但还不能让悬停工作:

<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>

编辑:调整标记有效，但问题仍然存在

Answer 1

使用.mouseenter。它工作得很好。演示

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

或者如果您想使用.on。演示

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

Answer 2

.hover()函数的工作原理:

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

Answer 3

适用于IE10+， Chrome, FF:

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