Javascript HTML标签与jQuery.on（'；hover'；，…）兼容吗

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

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

以下是我对jQuery的想法，但未能使悬停生效：

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

$（'#usernamelab'）。在（'hover'，function（）上{
$（this.css（'display'，'none'）；
});

HTML:

用户名

---

编辑：将标记调整为有效，但问题仍然存在。

使用

.mouseenter

。它很好用

或者如果您想在上使用

以下是
.hover（）
函数的工作原理：

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

用于IE10+、Chrome和FF：

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


您不能在
元素中放置
（或任何其他内容）。另外，
的“for”属性指的是一个“id”值，而不是一个“name”。好的，我可以移动它，但我们公司的CMS在其他领域默认会这样做，所以我想复制它们的登录门户结构。即使在调整之后，这两种方法都没有解决如何在悬停时隐藏标签的初始问题。这是无效的标记。
元素有一个“空”内容类型。我明白了，我已经修复了标记，但问题仍然存在。谢谢，先生，这是解决方案。将被接受时，时间限制被删除。这里有一个解决方案与一点动画：你应该考虑可用性，并再次显示标签…如果这只是向后兼容，这将是理想的路线。我想我可以做一些条件-明天试试。
$('#userNameLabel').on('mouseenter', function() {
    $(this).css('display','none');
});

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

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