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

【问题标题】：Are HTML labels compatible with jQuery .on('hover',...)HTML 标签是否与 jQuery 兼容 .on('hover',...)
【发布时间】：2013-05-29 20:01:09
【问题描述】：

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

我能够使用 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>

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

【问题讨论】：

您不能将<label>（或其他任何内容）放在<input> 元素中。此外，<label> 的“for”属性指的是“id”值，而不是“name”。
好的，我可以移动它，但我们公司的 CMS 在其他区域默认会这样做，所以我想为我们的登录门户复制它们的结构。即使经过调整，也没有解决最初的问题，即如何在悬停时隐藏标签。
这是无效的标记。 <input> 元素具有“空”内容类型。
我明白了，我已经修复了标记，但问题仍然存在。

标签： javascript jquery jquery-hover onhover

【解决方案1】：

使用.mouseenter。它工作得很好。 DEMO

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

或者如果你想使用.on。 DEMO

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

【讨论】：

谢谢先生，这就是解决方案。取消时限后将被接受。
这是一个有点动画的解决方案：jsfiddle.net/vP3Te你应该考虑可用性并再次显示标签......

【解决方案2】：

.hover() 函数的工作原理如下：

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

【讨论】：

【解决方案3】：

将此用于 IE10+、Chrome、FF：

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

【讨论】：

如果这只是向后兼容，这将是理想的路线。我想我可以做一些条件 - 明天试试。