Как скрыть label при фокусе на input?

Question

[doctor__23]

Всем, привет, коллеги!:)

Не могу понять, как сделать, чтобы при фокусе на input label прятался, а потом появлялся. Все очень просто на самом деле:

input:focus + label {
	display: none!important;
}

,
Но у меня структура, в которой label не идет за input'ом. Вот такая структура у меня:

<div class="req-item">
	<span class="wpcf7-form-control-wrap name-form">
		<input type="text" name="name-form" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required subscribe__group" id="modal_name" aria-required="true" aria-invalid="false" placeholder="Имя">
	</span>
	<label for="modal_name" class="label-name"><sub>*</sub>обязательно</label>
</div>

Возможно ли с помощью CSS это сделать?
Если нет, то как лучше это сделать на JQuery. Я сделал такую структуру, но он при фокусе прячется и больше не появляется:

$('input').focus(function(){
    $('label').hide();
});

Буду признателен за помощь, за ссылки или в какую сторону лучше смотреть:)

Answer 1

[WapSter]

В css должны быть на одном уровне, чтобы сработал +. А в js для события blur пропиши появление.

Comments

[doctor__23]

Это я понял, что они не на одном уровне:)
Что-то не совсем с blur понимаю, как сделать. Вроде документацию посмотрел, а понятнее не стало(

[WapSter]

doctor__23,

$('input').blur(function(){
    $('label').show();
});

[doctor__23]

WapSter, значит все правильно понял:)
Так нужно, чтобы при фокусе пряталось, а когда убираешь фокус, чтобы появлялось.

[WapSter]

doctor__23, нет когда это нужно

[doctor__23]

WapSter, Все, понял:)
Спасибо, добрый человек:)

[WapSter]

doctor__23, я человек злой, поэтому давай отмечай решением)

Answer 2

[zkrvndm]

Все проще простого. В JavaScript существуют события focus и blur, можно при наступлении этих события на конкретном элементе скрывать и показывать ваш лейбл. Пример кода с использованием данных событий в атрибутах:

<input onfocus="document.querySelector('label[for=modal_name]').style.display = 'none';" onblur="document.querySelector('label[for=modal_name]').style.display = 'block';" type="text" name="name-form" id="modal_name">

Код внутри onfocus выполняется при получении фокуса и делает лейбл невидимым, а код внутри onblur наоборот выполняется уже при потере фокуса и соответственно возвращает видимость.

Если разобрать более подробно, то document.querySelector('label[for=modal_name]') ищет на странице элемент с тегом label имеющий атрибут for равный modal_name, а далее мы просто присваиваем найденному элементу тот или иной стиль: display: none или display: block в нашем случае.

P. S. Добавлю напоследок, что код на jQuery будет короче, примерно так:

<input onfocus="$('label[for=modal_name]').hide();" onblur="$('label[for=modal_name]').show();" type="text" name="name-form" id="modal_name">

Comments

[doctor__23]

Спасибо большое, за подробное описание:)

[zkrvndm]

doctor__23, не за что) Как говорится, дело было вечером, делать было нечего, вот и настрочил.