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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

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

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

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree