Css hover focus active: CSS basic 8 — :hover, :active, :focus

Leave a Comment / Css / By /

:active — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
    1. Селектор по тегу в состоянии :active
    2. Селектор по классу в состоянии :active
    3. Составной селектор в состоянии :active
    4. Селектор по id в состоянии :active
    5. Селектор по классу и его псевдоэлемент в состоянии :active
  4. Как понять
  5. Подсказки
  6. На практике
    1. Алёна Батицкая советует

Кратко

Секция статьи «Кратко»

Псевдокласс :active позволяет задать стили для элемента, с которым происходит взаимодействие прямо сейчас. Например, можно задать кнопке стиль, который будет виден в тот краткий миг, когда на кнопке зажата клавиша мыши.

Пример

Секция статьи «Пример»

Сделаем объёмную кнопку, у которой будет меняться цвет фона и текста в активной фазе.

button {  padding: 2.5rem;  border: 0;  border-radius: 2.5rem;  font-size: 2.5rem;  background-color: #bada55;  cursor: pointer;  transition: background 0. 3s, color 0.3s;}button:active {  color: white;  background-color: purple;}
          button {
  padding: 2.5rem;
  border: 0;
  border-radius: 2.5rem;
  font-size: 2.5rem;
  background-color: #bada55;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
button:active {
  color: white;
  background-color: purple;
}

Как пишется

Секция статьи «Как пишется»

К любому селектору добавляем двоеточие и ключевое слово active.

Селектор по тегу в состоянии

:active Секция статьи «Селектор по тегу в состоянии :active»
a:active {  /* Стили */}
          a:active {
  /* Стили */
}

Селектор по классу в состоянии

:active Секция статьи «Селектор по классу в состоянии :active»
.link:active {  /* Стили */}
          .link:active {
  /* Стили */
}

Составной селектор в состоянии

:active Секция статьи «Составной селектор в состоянии :active»
 
li . link:focus {  /* Стили */}
          li .link:focus {
  /* Стили */
}

Селектор по id в состоянии

:active Секция статьи «Селектор по id в состоянии :active»
#id:active {  /* Стили */}
          #id:active {
  /* Стили */
}

Селектор по классу и его псевдоэлемент в состоянии

:active Секция статьи «Селектор по классу и его псевдоэлемент в состоянии :active»
.link::before:active {  /* Стили */}
          .link::before:active {
  /* Стили */
}

Как понять

Секция статьи «Как понять»

В момент нажатия на элемент при помощи кнопки мыши или клавиши клавиатуры этому самому элементу присваивается виртуальный класс :active, который можно стилизовать. За присвоение этого класса отвечает движок браузера, нам о самом процессе присвоения думать не нужно.

Подсказки

Секция статьи «Подсказки»

💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉

💡 Часто, если дизайнер не позаботился об отрисовке состояния :active для кнопок, можно задать стили сразу и для наведения курсора и для активного состояния:

button:hover,button:active {  /* Стили */}
          button:hover,
button:active {
  /* Стили */
}

На практике

Секция статьи «На практике»

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

🛠 Дизайнеры и верстальщики почему-то часто забывают про тот короткий промежуток времени, когда пользователь нажал кнопку мыши, но ещё её не отпустил. И не стилизуют состояние :active. Но «дьявол кроется в деталях», и если в вашем интерфейсе будут продуманы даже такие небольшие элементы, то он будет создавать ощущение опрятности и заботы о пользователе.

🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link — :visited — :hover — :active.

Этот порядок легко запомнить в виде аббревиатуры LVHA.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

:hover

alt + ←

→

:target

alt + →

Псевдоклассы CSS :focus, :hover и :active — RUUD

01-10-2018 20:24

The content of the article:

  • Динамические псевдоклассы
  • Возможности применения псевдоклассов

Если вы работали с CSS, то знаете, что стили применяются к селекторам, которые, в свою очередь, являются HTML-элементами. Но не всегда. Существует фантомная категория классов, которая возникает только в определенных состояниях объекта. Например, нажатая кнопка или выбранное поле ввода. Для таких особых случаев существуют псевдоклассы CSS :focus, :hover, :active.

Динамические псевдоклассы

CSS определяет три динамических псевдокласса, :focus, :hover, :active. Они меняют внешний вид объекта при определенных действиях пользователя. Это означает что для их появления нужно обязательное условие:

You will be interested:How dangerous is the new coronavirus?

.button:hover{ border: 1px solid #333; } .button:active{ opacity: .5; }

В этом примере, пока пользователь не наведет курсор мышки на элемент с классом button, записанные в :hover стили никак не проявятся.

Традиционно псевдоклассы используют для обработки ссылок и кнопок. Но диапазон возможностей гораздо шире. В CSS :focus ссылается на объект веб-страницы, которому принадлежит фокус ввода. Чаще всего это поля форм регистрации и поиска.

input[type=»text»], input[type=»email»]{ width: 300px; font-family: ‘Gochi Hand’, cursive; text-align: center; border: 0; outline: none; } input[type=»text»]:focus, input[type=»email»]:focus{ border: 0; }

:hover отвечает за элементы, над которыми размещен указатель мышки или другого устройства. В момент когда пользователь активирует какой-то объект на странице, например, кликает по ссылке, появляется псевдокласс :active

Возможности применения псевдоклассов

Стили для :active, :focus, :hover — это своеобразный способ общения с пользователем. Так вы подсказываете куда вводить данные, подчеркивает ссылки, выделяете элементы по которым можно нажать. С помощью удачных эффектов вы мотивируете посетителя ввести адрес электронной почты и подписаться на вашу рассылку. Благодаря красивым кнопкам «Войти!», «Читать дальше!» у тех, кто случайно попал на страницу, возникнет желание путешествовать по сайту дальше.

Но не применяйте псевдоклассы слишком усердно. Если вы добавите :hover почти ко всем элементам, у посетителей вашего сайта может начаться морская болезнь от массы увеличивающихся или мигающих объектов. Применяйте CSS псевдо-класс focus для изменения цвета рамки полей, не более. Лучший способ грамотно назначить :hover — это сделать цвет шрифта темнее при наведении мышки. Но не трогайте размер — от этого могут пострадать соседние элементы.

Источник

Автор: Алиса Снегова

Похожие статьи

css — Как удалить стиль наведения/фокуса после нажатия кнопки?

Задавать вопрос

спросил

Изменено 1 год, 7 месяцев назад

Просмотрено 2к раз

Я знаю, что при проектировании и разработке специальных возможностей обычно &:hover и &:focus имеют одинаковый стиль (наведение мыши и фокус табуляции). Но я столкнулся с проблемой, когда я щелкаю мышью, отпускаю и наводил курсор на кнопку, она остается в состоянии &: focus.

Я думал, что добавление стилей к &:active решит эту проблему, но я понял, что это влияет только на то, когда кнопка нажата, но не отпущена.

Есть ли способ сохранить &:hover и &:focus одинаковыми, но не оставить стиль фокуса, если пользователь нажмет кнопку? Я бы предпочел не использовать javascript, но если это единственное решение, то я тоже согласен. Спасибо.

В демо первая кнопка — это то, что у меня сейчас есть. Текущая кнопка корректна при табуляции, но не при щелчке мышью. Вторая демонстрация — это то, что я ожидаю от щелчка мышью, но табуляция неверна.

редактировать 

 кнопка {
  высота: 200 пикселей;
  ширина: 200 пикселей;
  белый цвет;
  цвет фона: зеленый;
  переход: цвет фона 250 мс;
}
/*кнопка:наведение, кнопка:фокус {
  цвет фона: синий;
}
.btn2: фокус {
  цвет фона: зеленый;
}
.btn2: наведите {
  цвет фона: синий;
}*/
кнопка:наведите {
  цвет фона: синий;
}
кнопка: фокус: активный {
  цвет фона: синий;
}
  • css
  • кнопка
  • наведение
  • фокус

2

Я решил свою проблему из этой статьи: https://thoughtsandstuff. com/focus-style-css-for-keyboard-navigation/#what-about-focus-visible

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как использовать псевдоклассы hover, active и focus для форматирования ссылок? — Веб-учебники

Как использовать псевдоклассы hover, active и focus для форматирования ссылок?

Автор: Deron Eriksson

Описание: В этом руководстве по CSS описывается, как использовать псевдоклассы :hover, :active и :focus для форматирования элементов в ответ на взаимодействие пользователя с веб-страницей.

Учебник создан с использованием: Windows ХР

Псевдоклассы :hover, :active и :focus можно использовать для управления форматированием ссылок в ответ на действия пользователя в браузере. Псевдоклассы :hover и :active хорошо поддерживаются как в IE7, так и в Firefox, но :focus работает только в Firefox. Псевдокласс :hover определяет форматирование, когда пользователь наводит указатель мыши на ссылку. Псевдокласс :active применяется при нажатии на ссылку с помощью кнопки мыши до момента отпускания кнопки. Псевдокласс :focus применяется, когда ссылка имеет фокус, который достигается такими вещами, как переход по ссылке через клавиатуру.

При применении нескольких псевдоклассов, таких как :link, :visited, :hover, :active и :focus, порядок ваших правил важен из-за каскадирования. Итак, если что-то не так, как вы ожидаете, вы можете изменить порядок правил, чтобы посмотреть, исправит ли это ситуацию.

Файл style-test.html демонстрирует наши псевдоклассы. Если ссылка находится в фокусе при нажатии на нее на клавиатуре, она будет окрашена в желтый цвет (в Firefox). Если мы наведем курсор мыши на ссылку, она будет синей и жирной. Если мы нажмем на ссылку и будем удерживать кнопку мыши нажатой, ссылка будет красной и выделена курсивом.

style-test.html 



<голова>

Тест стиля
<тип стиля="текст/CSS">
{ цвет: зеленый; }
а: фокус {цвет: желтый; }
а: наведите { цвет: синий; вес шрифта: полужирный; }
а: активный { цвет: красный; стиль шрифта: курсив; }

  
<тело>
Перейти в Google
Перейти на локальный хост

Здесь мы видим style-test.html в IE7. Цвет ссылки зеленый.

Если навести указатель мыши на ссылку, она станет синей и жирной.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *