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

Question

当用户将鼠标悬停在标签上时，能够淡化或隐藏表单的输入标签会很好。在我的特殊情况下，我“绝对”将标签放置在输入框的顶部，因此当用户将鼠标悬停在标签上或单击输入框时，我希望标签消失（因此它们的类型不是显示在标签文本下方）。

我能够使用 CSS 在单击文本输入时隐藏标签，但还没有找到一种方法在悬停（或鼠标悬停）或类似的东西时使标签“显示：无”。

这是我对 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">