Как сохранить видимость родительского элемента, когда дочерний элемент выделен :focus

Дата публикации: 2017-12-22

От автора: видимость родительского элемента в CSS при выделенном дочернем. Использование focus-within. Применение JavaScript в случае отсутствия поддержки фокуса браузерами — об этом в данной статье.

Предположим, у нас есть div. Нам просто нужно с помощью CSS родительский элемент оставить видимым при наведении курсора:

div:hover { 
  opacity: 1; 
}

div:hover {

opacity: 1;

}

Для обеспечения доступности элемента нам также нужно описать состояние выделения фокусом ввода:

div:hover,
div:focus { 
  opacity: 1; 
}

div:hover,

div:focus {

opacity: 1;

}

Но div не может быть выделен фокусом ввода сам по себе, поэтому нам нужно:

<div tabindex="0">
</div>

1 2	<div tabindex="0"> </div>

Этот div содержит контент. Не только текст, но и ссылки.

<div tabindex="0">
  <p>This little piggy went to market.</p>
  <a href="#market">Go to market</a>
</div>

<p>This little piggy went to market.</p>

<a href="#market">Go to market</a>

</div>

Вот где начинаются сложности. Когда фокус ввода смещается на анкор ссылки внутри него, div больше не выделен фокусом ввода, что в результате дает подобную странную и потенциально запутанную ситуацию:

Как сохранить видимость родительского элемента, когда дочерний элемент выделен :focus

В этом примере в состоянии :hover div виден. Div также выделяется фокусом ввода, но когда вы перемещаете фокус ввода на ссылку, она скрывается. Ссылка может быть выделена фокусом ввода, но визуально она будет скрыта, потому что скрыт ее родительский элемент.

Одно из решений заключается в том, чтобы обеспечить видимость div, когда какой-нибудь элемент внутри него выделен фокусом ввода. В этом нам поможет следующий CSS-код:

div:hover,
div:focus,
div:focus-within { 
  opacity: 1; 
}

div:hover,

div:focus,

div:focus-within {

opacity: 1;

}

Но :focus-within слабо поддерживается браузерами. Если бы браузеры достаточно хорошо поддерживали этот псевдо-элемент, нам больше ничего и не нужно было бы. На самом деле нам даже не нужен был бы даже :focus потому что все обрабатывал бы :focus-within.

Но пока ситуация с поддержкой браузерами не улучшиться, нам понадобится для данной ситуации JavaScript. Как конкретно вы это реализуете, зависит от вас, но общая идея заключается в следующем…

1. Когда элемент выделяется фокусом ввода …
2. Если родительский элемент этого элемента также может быть выделен фокусом ввода, следует обеспечить его видимость
3. Когда со ссылки снимается фокус ввода …
4. Что бы вы ни делали, обеспечьте видимость родительского элемента

Здесь можно рассматривать много аспектов, например какие именно элементы вы хотите сделать видимыми, как сделать их видимыми, или насколько глубоко по дереву иерархии элементов вы хотите зайти. Что-то вроде этого — очень простой подход:

var link = document.querySelector(".deal-with-focus-with-javascript");

link.addEventListener("focus", function() {
  link.parentElement.classList.add("focus");
});
link.addEventListener("blur", function() {
  link.parentElement.classList.remove("focus");
});