Блог

Главная - Вопросы по программированию - Скрыть фокус контура на ссылке при нажатии

Скрыть фокус контура на ссылке при нажатии

#css #hyperlink #focus #tabindex #outline

#css #гиперссылка #фокус #tabindex #контур

Вопрос:

Мне нужно скрыть контур фокуса при нажатии на ссылку. Но мне также нужно показать это, когда я перемещаю ссылки с помощью tabindex. Некоторые веб-сайты делают это с помощью какого-либо конкретного обходного пути.Кажется, что это поведение по умолчанию. Но на моем веб-сайте, когда я нажимаю на ссылку, она также показывает контур. Как я могу показать контур, только когда я перемещаю ссылки с помощью клавиши tabindex? Заранее спасибо. Helmut

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

1. что у вас есть на данный момент? Удаление контура — это простая манипуляция с CSS, выполнение которой в какой-то момент может быть немного сложнее, но не выглядит невозможным. Вы уже прочитали эту статью ?

2. Да, я знаю, что могу удалить контур с помощью свойств css, но мне нужно показывать его при нажатии клавиши tabindex, как это делает домашняя страница Google.

Ответ №1:

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

Вместо этого вы могли бы скрыть контур для всех элементов на странице с помощью CSS:

 a:focus, a:active {
  outline:0;
}
a.tabbed {
  outline:1px solid red;
}

Затем вы должны использовать JavaScript для настройки контура для определенных элементов, которые получают фокус с помощью клавиши tab.

 document.addEventListener('keyup', function (e) {
    var code = e.keyCode ? e.keyCode : e.which;
    var el = document.activeElement;

    if (code == 9 amp;amp; el.tagName == 'A') {
        el.className = "tabbed";
    }
}, true);

Я добавил краткий пример:http://codepen.io/anon/pen/aljsu