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。它工作得很好。 DEMO

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

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

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

HTML标签是否与jQuery .on兼容（'hover'，...）

3 个答案: