Are HTML labels compatible with jQuery .on('hover',...)

Question

It would be nice to be able to fade or hide a form's input label when a user hovers over the label. In my particular case, I've 'absolutely' positioned the labels on top of the input box, so when a user mouses over the label OR clicks into the input box, I would like the label to disappear (so their type isn't showing beneath the label text).

I was able to use CSS to hide the label on click of the text input, but have not found a way to make the label 'display:none' when hovered (or mouse overed) or something similar.

Here's what I had in mind for the jQuery, but have not been able to get the hover to work:

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

Edit: Adjusted markup to be valid, but issue remains.

You can't put a `` (or anything else) inside an `` element. Also the "for" attribute of a `` refers to an "id" value, not a "name". — Pointy, May 29 '13 at 20:02
Okay, I can move that, but our company's CMS does that by default in other areas, so I wanted to replicate their structure for our login portal. Even after adjusting, neither fixes the initial question of how to create the hiding of the label on hover. — beta208, May 29 '13 at 20:04
It's invalid markup. The `` element has an "empty" content type. — Pointy, May 29 '13 at 20:05

score 4 · Accepted Answer · answered May 29 '13 at 20:07

4

Use .mouseenter. It works just fine. DEMO

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

Or if you want to use .on. DEMO

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

answered May 29 '13 at 20:07

Turnip

35,836
15
89
111

Thank you sir, this is the solution. Will be accepted when timelimit is removed. – beta208 May 29 '13 at 20:11
Here is a solution with a bit of animation: http://jsfiddle.net/vP3Te/ You should think about usability and show the label again... – gearsdigital May 29 '13 at 20:12

score 1 · Answer 2 · answered May 29 '13 at 20:11

1

Here's how the .hover() function works:

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

answered May 29 '13 at 20:11

Pointy

405,095
59
585
614

score 1 · Answer 3 · answered May 29 '13 at 20:30

1

Use this for IE10+, Chrome, FF:

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

answered May 29 '13 at 20:30

Jonathan

8,771
4
41
78

If only this were backwards compatible, this would be the ideal route. I guess I can do some conditionals - will try tomorrow. – beta208 May 29 '13 at 22:42

Are HTML labels compatible with jQuery .on('hover',...)

3 Answers3