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

Возможности псевдокласса :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,
/*решение проблемы скликивания*/
.btn:active .link-obj, /*кнопка не исчезает при клике*/
.link-obj:hover {
  display: inline-block;
}

  Пример решения:

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

©http://magentawave.com