Размещение ссылок в элементах с фокусом. Решение

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

  Причина заключается в том, что родительский элемент теряет фокус быстрее чем происходит событие(клик) по ссылке, и перехода по ссылке не происходит.

сделай мне :focus
кликни


Для примера используется вот такая HTML-конструкция:
<span class='btn' tabindex='1'>сделай мне :focus
<span class='link-obj'><a href='#'>кликни</a>
</span>
</span>
  Чтобы решить данную проблему, достаточно добавить к элементу с ссылкой псевдокласс :hover, который не даст исчезнуть блоку раньше чем произойдет клик по ссылке. В CSS коде это выглядит так:
.btn {
  display: inline-block;
  text-align: center;
  padding: 10px;
  height: 50px;
  width: 180px;
  background: #28BAF3;
}
.link-obj {
  display: none;
  text-align: center;
  padding: 5px;
  height: 20px;
  width: 80px;
  background: #ECECEC;
}
.btn:focus {
  background: #8EE600;
}
.btn:focus .link-obj,
.link-obj:hover { /*решение проблемы скликивания*/
  display: inline-block;
}
  Пример решения:

сделай мне :focus
кликни


©http://magentawave.com

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

Отправить комментарий

Следующее Предыдущее

BestProject