Раскрытие тайны: почему видимость CSS не работает при наведении курсора

Видимость CSS предлагает удобный способ управления видимостью элементов, но иногда он спотыкается неожиданные препятствия. Рассмотрим сценарий, в котором вы определили класс «спойлер», который изначально делает текст невидимым и отображает его при наведении курсора мыши. Несмотря на ваши ожидания, текст упорно остается в скрытом состоянии, игнорируя ваши усилия по наведению курсора.

Погружение в причину

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

Решение дилеммы видимости

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

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: E.T. phones home.

Объяснение:

Встраивая скрытый текст в элемент span, вы гарантируете, что внешний элемент спойлера останется видимым. , что позволяет ему захватывать событие наведения. При наведении курсора становится видимым внутренний элемент span, открывая текст спойлера.

Дополнительные замечания

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

.spoiler {
    outline: 1px solid transparent;
}

Этот прозрачный контур гарантирует, что элемент спойлера имеет достаточный размер для приема события наведения, не мешая общей видимости текста.

Благодаря этим настройкам ваш класс спойлера будет работать безупречно, сохраняя невидимость скрытого текста и удобство наведения.