Совместимы ли метки HTML с jQuery .on('hover',)

Было бы неплохо иметь возможность затемнять или скрывать метку ввода формы, когда пользователь наводит на нее курсор. В моем конкретном случае я «абсолютно» расположил метки поверх поля ввода, поэтому, когда пользователь наводит указатель мыши на метку ИЛИ щелкает в поле ввода, я хотел бы, чтобы метка исчезла (поэтому их тип не отображается под текстом метки).

Я смог использовать 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>

Изменить: скорректирована разметка, чтобы она была действительной, но проблема остается.


javascript jquery onhover jquery-hover
person beta208    schedule 29.05.2013    source источник
comment
Вы не можете поместить <label> (или что-то еще) внутри элемента <input>. Также атрибут for для <label> относится к значению id, а не к имени.   -  person Pointy    schedule 30.05.2013
comment
Хорошо, я могу перенести это, но CMS нашей компании делает это по умолчанию в других областях, поэтому я хотел воспроизвести их структуру для нашего портала входа. Даже после настройки ни как не решает первоначальный вопрос как создать скрытие метки при наведении.   -  person beta208    schedule 30.05.2013
comment
Это недопустимая разметка. Элемент <input> имеет пустой тип содержимого.   -  person Pointy    schedule 30.05.2013
comment
Я понимаю, я исправил разметку, но проблема не устранена.   -  person beta208    schedule 30.05.2013

Ответы (3)


arrow_upward
4
arrow_downward

Используйте 1_. Это работает просто отлично. ДЕМО

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

Или, если вы хотите использовать .on. ДЕМО

$('#userNameLabel').on('mouseenter', function() {
    $(this).css('display','none');
});
person Turnip    schedule 29.05.2013
comment
Спасибо, сэр, это решение. Будет принято, когда ограничение по времени будет удалено. - person beta208; 30.05.2013
comment
Вот решение с небольшой анимацией: jsfiddle.net/vP3Te Вы должны подумать об удобстве использования и показать снова маркировка... - person gearsdigital; 30.05.2013

arrow_upward
1
arrow_downward

Вот как работает функция .hover():

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

arrow_upward
1
arrow_downward

Используйте это для IE10+, Chrome, FF:

<input type="text" name="fname" placeholder="First name">
person Jonathan    schedule 29.05.2013
comment
Если бы только это было обратно совместимо, это был бы идеальный маршрут. Я думаю, я могу сделать некоторые условия - попробую завтра. - person beta208; 30.05.2013