Css active focus hover – css selectors — Performance of transition CSS on *:link,*:visited,*:hover,*:active,*:focus

Leave a Comment / Css / By /

Псевдокласс :focus | CSS — Примеры

Элементу, получившему фокус, можно задать стиль с помощью псевдокласса :focus [w3.org].

Чем отличаются :active, :focus и :hover

<style>
.input1:hover { 
  background: blue;
}
.input1:focus { 
  background: green;
}
.input1:active { 
  background: red;
}
</style>

<input type="text"/>

:active, :focus и :hover равнозначны, побеждает тот, что ниже.

<style>
.input2:active {
  background: red;
}
.input2:focus {
  background: green;
}
.input2:hover {
  background: blue;
}
</style>

<input type="text"/>

:focus для тегов HTML: input, select и textarea

<input type="text" placeholder="ФИО"/>

:focus для всех тегов HTML

:focus можно прописать для любого тега HTML, но если это не элемент формы, то нужно указывать атрибут tabindex или contenteditable.

Это тег div. Его содержимое не поменять.

<div tabindex="0">Это тег div</div>

Это тег div. Его содержимое можно менять.

<div contenteditable>Это тег div</div>

Как снять фокус CSS

  1. Кликнуть вне элемента.
  2. Кликнуть по дочернему элементу, который может иметь фокус.

    Нажатие и на зелёное поле, и на синее приведёт к смене фона. Клик по синему полю не снимет фокус.

    
<div tabindex="0">
  <div></div>
</div>

    Нажатие только на зелёное поле приведёт к смене фона. Клик по синему полю снимет фокус с родителя, установит фокус на внутреннем div.

    <div tabindex="0">
  <div tabindex="0"></div>
</div>
  3. Кликнуть по элементу, который в состоянии фокуса имеет pointer-events: none;.

    Нажатие на зелёное поле приведёт к смене фона. Повторный щелчок снимет фокус.

    
<div tabindex="0"></div>
  4. Кликнуть по дочернему элементу, если для элемента в состоянии фокуса стоит visibility: hidden;. Google Chrome не хочет, чтобы в состоянии фокуса элемент пропадал.
    
<div tabindex="0">
  <div></div>
</div>

Практические примеры

  1. Адаптивное горизонтальное меню для сайта на CSS
  2. Фотогалерея для сайта на CSS

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

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

css псевдокласс focus

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

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

.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

добавлять стили для псевдокласса CSS :focus

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

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

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

Псевдокласс :focus | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+1.0+7.0+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Псевдокласс :focus определяет стиль для элемента получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.

Синтаксис

элемент:focus { … }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>focus</title>
  <style>
   #enter .label {
     width: 80px; /* Ширина блока с текстом */
     float: left; /* Расположение в одну строку с полем */
     text-align: right; /* Выравнивание по правому краю */
   }
   #enter .form-text {
     width: 240px; /* Ширина поля */
     margin-left: 10px; /* Расстояние между полем и текстом */
     border: 1px solid #abadb3; /* Рамка вокруг текстового поля */
     padding: 2px; /* Поля вокруг текста */
   }
   #enter .form-item {
     margin-bottom: 5px; /* Отступ снизу */
   }
   #enter .form-text:focus {
     background: #ffe; /* Цвет фона */
     border: 1px solid #29B0D9; /* Параметры рамки */
   }
   #enter p {
    margin-left: 90px; /* Сдвиг вправо */
   }
  </style>
 </head>
 <body>
  <form action="login.php" method="post">
   <div>
     <span>Логин:</span>
     <span><input type="text" name="login" value=""></span>
   </div>
   <div>
     <span>Пароль:</span>
     <span><input type="password" name="pass"></span>
   </div>
   <p><input type="submit" value="Войти" /></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1. При получении фокуса текстовое поле меняет цвет фона и цвет границы.

Рис. 1. Результат использования псевдокласса :focus

Браузеры

Chrome не добавляет стиль для селектора a, чтобы заставить его понимать правило a:focus, добавьте к тегу <a> атрибут tabindex.

<a href=»http://htmlbook.ru/1.html» tabindex=»1″>Ссылка</a>

Всегда используйте :hover вместе с :focus | HTML и CSS

Всегда используйте :hover вместе с :focus

Мне очень понравилась Пашина статья о псевдоклассах. =) Специально по такому случаю в закромах была недавняя заметка с 456bereastreet.

В ней рассказывается о том, что может повлечь за собой игнорирование псевдокласса :focus.

Мы рассмотрим типы проблем и в итоге узнаем что делать, чтобы избежать их.

  

Реализация правил для псевдокласса :hover без реализации :focus является наиболее частым недосмотром при проектировании стиля сайта. Серьезность проблем при таком недосмотре зависит от того, как вы определили поведение для состояния :hover.

Рассмотрим их в порядке возрастания серьезности.

1. Неряшливость

Если для :hover заданы простые правила, например, только изменение цвета текста, пренебрежение :focus не влечет за собой серьезных проблем. В этом случае при смене фокуса с помощью клавиатуры актуальный элемент просто никак не выделится.

2. Серьезные проблемы использования

Гораздо больше проблем вы получите, если зададите свойство outline равным 0 или значению none. Эта проблема сейчас набирает актуальность, т.к. сведение на нет эффекта outline довольно популярно.

В этом случае ссылки технически доступны, но это никак не подтверждено визуально. Разве что некоторые браузеры отображают в статусной строке текущее значение href сфокусированной ссылки.

3. Полная недосягаемость

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

Фокус на :focus (и :active)

Все перечисленные проблемы решаются довольно просто: там же, где вы определяете правила для :hover, укажите и :focus. Для того, чтобы Internet Explorer версий 7 и ранее распознал правила, надо дописать псевдокласс :active.

Пара слов о порядке перечисления псевдоклассов объявлении

Этот параграф — отдельная заметка. Все желающие могут ознакомиться с оригиналом статьи.

Для многих известно, что порядок объявления псевдоклассов правиле CSS имеет значение. На 456bereastreet предпочитают следующий порядок:

:link, :visited, :hover, :focus, :active

Этот порядок основан на нескольких статьях Эрика Мейера. Одна из них содержит довольно забавные мнемоники, я привожу их ниже на языке оригинала:

  • LoVe’s Hurts Fade Away;
  • Luther Vandross Hits Fabulous Arpeggios;
  • Lord Vader Hates Furry Animals;
  • Lusty Vampires Hunger For Absinthe;
  • Lord Voldemort Has Foul Ambitions.

Небольшое лирическое

Если кто-то думает: «Э… а как же модульные сетки, все дела, Марк Болтон и все такое». Сетки — будут позже. Болтон… при всем к нему уважении, такое огромное количество воды мне попросту надоело переводить. Будет время, переведу. Прошу прощения за то, что не довел до конца. Но там уже какая-то художественная литература, так что сюда ее выкладывать нет никакого смысла. В ближайшем рассмотрении весь этот цикл был всего лишь рекламой его книги с одноименным названием. К сожалению, это западный мир. Бесплатно дают только стакан воды.

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

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