HTML и CSS: как сделать весь div кликабельным без JS

Быстрый ответ

Чтобы превратить блок <div> в активный элемент, аналогичный ссылке, оберните его тегом <a> и задайте соответствующие CSS-стили. Пример кода представлен ниже:

<a href="http://your-destination.com" style="display: block; text-decoration: none; color: inherit;">
  <div style="cursor: pointer;">
    <!-- Содержимое, с которым можно взаимодействовать -->
    Нажимаемое содержимое
  </div>
</a>

Теперь кликабельность блока <div> будет такой же, как и у стандартной кнопки.

Эффект печати: полное покрытие ссылками

Расширение области действия ссылки создаёт эффект, сравнимый с оттиском почтового штемпеля, закрывающего всю поверхность конверта.

"Увеличиваем" тег <a>

При присвоении тегу <a> стиля display: block;, его область действия заметно "расширяется". Весь содержимый блок становится активной частью веб-пространства. Очень важно, чтобы тег <a> оборачивал всё содержимое блока, включая вложенные элементы.

Подробнее об этом расскажет наш спикер на видео

Трансформация: маскировка ссылки

Для того чтобы скрыть истинное предназначение тега <a>, используйте text-decoration: none;, что позволит избавиться от типичного подчеркивания. Не забывайте о доступности, ведь это признак высококлассных программистов.

Визуализация

Вот как выглядит страница, "покрытая почтовыми марками", которые покрывают весь конверт, а не один его уголок:

До применения CSS-трюка:
+------------------+
|                  |
|     📫 [Click]   |
|                  |
+------------------+

После применения CSS-трюка:

// Вся поверхность кликабельна, как БОЛЬШАЯ ПОЧТОВАЯ МАРКА!
+------------------+
|    📮 [Click]    |
|                  |
|        /* Больше функциональности? Возможно. Полезно? Несомненно. */
|   Теперь можно кликать куда угодно |
+------------------+

Ваш div становится кликабельным объектом на странице, на который можно нажать, как на почтовую марку.

Полнота покрытия: прогрессивный CSS

Используем все возможности CSS для создания максимально кликабельного элемента div.

Позиционирование: точно по Золушке

Тег <a> следует "надеть" на блок div, как на Золушку влезла стеклянная туфелька, применив к нему абсолютное и относительное позиционирование.

div.container {
  /* Обычный div */
  position: relative;
}
a.full-div-link {
  /* Идеально подходит */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Текстовые трюки: то есть, то его нет

Иногда требуется скрыть текст, оставив кликабельным только сам блок div. Используйте свойства text-indent и overflow и текст исчезнет, оставив поверхность кликабельной:

a.full-div-link {
  /* Скрываем текст. */
  text-indent: -9999px;
  overflow: hidden;
}

Кликабельность: указываем на возможность

Не забывайте добавить cursor: pointer;, что указывает пользователям на возможность кликнуть по блоку div.

Соответствие и удобство использования: безупречно и чисто

С кликабельным блоком div необходимо соблюдать стандарты W3C и делать его удобным для пользователей: это придаст совершенства вашему коду:

Валидный HTML: чисто до сверкания

Используйте валидатор W3C для проверки кода. Это поможет избежать сюрпризов, связанных с работой в разных браузерах.

Совместимость с браузерами: не разводит скот

Позаботьтесь о том, чтобы ваш кликабельный блок div корректно работал во всех различных браузерах.

Дружелюбие к обслуживанию: сегодня и завтра

Возвращение к чистому и структурированному коду, как возвращение домой после тяжёлого дня, придаёт силы и облегчает поддержку кода!

Обработка клик-событий: используйте с осторожностью

Может случиться так, что вам потребуется обрабатывать события onClick. Если это так, то используйте их, как острую пряность в блюде: малое количество производит большое впечатление.

Полезные материалы

1. Сделать весь Div кликабельным | CSS-Tricks — Прекрасная подборка CSS-техник для расширения кликабельности блока.
2. <a>: Якорный элемент – HTML: Гипертекстовый язык разметки | MDN — Истинная энциклопедия якорных тегов.
3. CSS – Сделать div ссылкой – Stack Overflow — Мнения сообщества о создании кликабельных блоков без JavaScript.
4. WebAIM: Ссылки и гипертекст – Текст ссылки и её внешний вид — Как создавать гиперссылки, удобные и дружественные к пользователям.