В данном уроке мы рассмотрим небольшой трюк, который поможет увеличить область для нажатия для ссылок. Зачем? Большая область существенно упрощает пользователям переход по ссылкам, что повышает уровень удобства использования интерфейса веб проекта.
Посмотрите демонстрацию к уроку. Использовать ссылку, которая сделана с применением трюка, гораздо удобнее - нужно навести курсор мыши на любую часть блока, а не только на несколько конкретных слов.
Обычная ссылка в тексте выглядит так:
<элемент>
Для получения подробных сведений, пожалуйста, <ссылка>свяжитесь с нами</ссылка>.
</элемент>
Конечно, чтобы увеличить область нажатия нужно использовать другую конструкцию:
<ссылка>
Для получения подробных сведений, пожалуйста, <элемент>свяжитесь с нами</элемент>.
</ссылка>
И действительно, код в демонстрации выглядит так:
<a href="#" id="large-hit">
Для получения подробных сведений, пожалуйста, <span>свяжитесь с нами</span>
</a>
Весь параграф стал ссылкой. Нажимать можно везде. Но если убрать все стили для ссылки, то наш параграф будет выглядеть как обычный текст. Поэтому, нужно сделать так, чтобы ссылка выглядела как обычный текст, а выделенная с помощью элемента span часть была похожа на обычную ссылку:
/* Стиль для ссылки и выделенной части большой области */
a,
#large-hit span{
color:#c00;
text-decoration:none;
font-weight:bold;
}
/* Изменения при наведении курсора мыши на ссылку и на большую область */
/* В большой области изменения касаются только выделенной части */
a:hover,
#large-hit:hover span{
text-decoration:underline;
}
/* Стиль для параграфа и большой области (общие правила)*/
p,
#large-hit{
font-size:3em;
line-height:1em;
padding:10px;
background:#e4e4e4;
}
/* Стиль для большой области, чтобы сделать ее похожей на обычный текст*/
#large-hit{
text-decoration:none;
color:#333;
font-weight:normal;
display:block;
}
Теперь наша ссылка выглядит так же, как и обычный текст, а выделенная с помощью элемента span часть - как ссылка в тексте. При наведении курсора выделенная часть реагирует как обычная ссылка, а переход осуществляется по нажатия в любой части большой области.
Вот так несколько строк на CSS и небольшое изменение разметки может существенно изменить уровень удобства использования интерфейса. Такой трюк может особенно пригодиться при разработке варианта дизайна для мобильных устройств с их маленькими дисплеями.