html — css hover: эфект (для списка)

(!) Осторожно, пиксели.

Задолбался переделывать ваш код, сделал с нуля, наверно сможете уже допилить его к себе)
Вместо кругляшек выступают обычные блоки с border-radius: 50%. А при наведении — убираю радиус бордеров справа.

JsFiddle

.bubu {
  padding: 5px 0; 
  border: 1px solid red; /* для наглядности */
  width: 160px; 
  position: relative; /* У кругляшек абсолютная позиция. 
  А этот фрагмент у родительского блока, будет удерживать их внутри */
  cursor: pointer;
  box-sizing: border-box;/*Это важно, чтобы при наведении padding не сдвигал блок*/
  transition: 0.5s;
}

.bubble {
  width: 16px; height: 16px; position: absolute;
  right: 15px; top: 6px;
  background-color: #236; border-radius: 8px;
  transition: 0.2s;
}

.bubu:hover .bubble {
  right: 0; width: 31px; 
  /* собственная ширина была 16, right: 15; 
   * Теперь right: 0; а ширина стала 16 + 15 px
   */
  border-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: #bc007c;
}

.  bubu:hover {
  padding-left: 15px;
  color: #bc007c;
}

<ul>
  <a href="#">
    <li>Новые<div></div></li>
  </a>
  <li>Бубу<div></div></li>
  <li>Чебурашки<div></div></li>
</ul>

P.s. вместо padding-left, padding-right по-отдельности, можно прописать сразу 4 числа в один. Начиная с верхнего padding-top, дальше всё идет по стрелке часов:

padding: верх право вниз лево;
____________

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

сокращается до:

padding: 10px 20px 30px 40px;

Та же история и с margin. А если там всего два числа, первая означает верх-вниз, второе: лево-право.

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода

10 января 2021

1. Отношения между тегами Html кода — дерево документа
2. Селекторы псевдоклассов — hover, focus и first-child
3. Селекторы псевдоэлементов — first-line (letter), after и before

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo. ru. Сегодня мы продолжим тему изучения таблицы каскадных стилей и наполнять новыми материалами справочник.

Тема селекторов в CSS, которая была начата в предыдущей статье, осталась еще не завершенной, ибо мы рассмотрели только пять из семи возможных типов (тега и класса (class), Id, универсальный и атрибутов) и на очереди остались селекторы псевдоклассов и псевдоэлементов.

Отношения между тегами Html кода — дерево документа

Давайте начнем с псевдоклассов. Тут, правда, сначала нужно будет сделать отступление. Любой браузер, получая документ с любым языком разметки, тут же начинает его разбирать. Модуль, отвечающий в браузере за это дело, обычно называют парсер — он разбирает код, исправляет ошибки и формирует так называемое дерево.

Результат работы парсера любого браузера можно увидеть с помощью некоторых плагинов или расширений для этих обозревателей. Например, все тот же незаменимый плагин для Firefox под названием Firebug показывает это самое дерево документа:

Узлы этого дерева помечены плюсиками, нажав на которые можно будет увидеть вложенные элементы языка разметки Html. Построение этого дерева и есть результат работы парсера браузера. Давайте теперь посмотрим на принципы отношения между собой отдельных узлов.

Таких взаимоотношений может быть всего три вида (очень похоже на построение генеалогического дерева — отношение между родственниками):

1. Предки и потомки. Например, для тега, показанного на приведенном выше примере, все остальные элементы являются потомками. Для них же всех он является прародителем — предком. Т.е. все, что находится внутри — это потомки. А предками будут являться все элементы, внутри которых данный элемент лежит.
   
2. Родитель и ребенок — в цепочке предки-потомки всегда есть два ближайших звена, которые будут отвечать понятиям родитель и ребенок. Т.е. у любого Html элемента есть один родитель (ближайший предок) и в то же время у него могут быть или не быть один или же несколько детей.
   
3. Сестринские (братские) отношения — к ним относятся элементы, у которых один общий родитель.

Само по себе название «псевдоклассы» обозначает то, что специально в коде ни у каких элементов (тегов) такие классы (значения для атрибута Class) никто не прописывал, но у этих самых элементов периодически могут возникать определенные динамические состояния, для которых и были придуманы селекторы псевдоклассов.

Селекторы псевдоклассов — hover, focus, first-child и другие

Например, селекторы Link и Visited во всех браузерах могут использоваться только для оформления гиперссылок:

Link подразумевает под собой не посещенную ссылку (по которой пользователь еще не переходил), а Visited — посещенную. Таким образом вы можете настроить, например, изменение цвета для уже посещенных пользователем ссылок, ну или еще что-то другое (задать визуальное состояние для всех посещенных гиперссылок). Естественно, что посещенные будут учитываться именно для данного конкретного браузера и до момента очистки его истории.

Синтаксис написания селекторов псевдоклассов заключается в проставлении двоеточия после названия Html элемента, для которого вы его используете (a:visited).

a:visited {color:red;}

Следующие три селектора (active, hover и focus) могут использоваться для любых тегов:

Active соответствует клику левой кнопки мыши по тому элементу в Html коде, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это тег гиперссылки A). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет.

p:active {color:red}

В этом случае, при наведении курсора мыши на любой абзац текста и щелчке по левой кнопке мыши, мы увидим, что цвет этого параграфа изменится на красный. После отжатия кнопки цвет абзаца опять вернется к принятому по умолчанию. Т.е. данный псевдокласс active динамичен и будет работать абсолютно для любых тэгов (например, для контейнеров Div и т.п.). При клике на этом элементе он может изменить свое визуальное оформление в соответствии с нашими пожеланиями.

Hover — позволяет изменять визуальное оформление любого элемента в Html коде при наведении на него курсора мыши. При отведении курсора визуальное оформление элемента вернется к используемому по умолчанию.

p:hover {color:red}

Псевдокласс focus — позволяет изменять визуальное оформление тегов находящимся сейчас в фокусе. Как известно, фокус на веб странице можно переносить с помощью нажатия на клавишу Tab на клавиатуре. Причем, фокус может передаваться только между следующими элементам: ссылки и элементы форм в Html.

Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а focus не работает вообще ни в IE 6, ни в IE 7.

Последний псевдокласс называется first-child (первый ребенок, в переводе).

:first-child {color:red}

Эта запись будет означать, что все элементы исходного кода страницы, которые являются первыми детьми своих родителей, будут покрашены в красный цвет.

First-child в IE 6 не работает, что печально.

Селекторы псевдоэлементов — first-line (letter), after и before

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

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

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

p:first-line {color:red}

Что это даст? Во всех параграфах на веб странице первые строки текста окрасятся в красный цвет. Для простоты подключим CSS к языку Html с помощью тега style и пропишем соответствующее свойство с использованием псевдоэлемента first-line в селекторе параграфа:

Тогда, как мы и планировали, все первые строки в абзацах окрасятся в красный цвет:

Ну, а с помощью first-letter можно сделать, например, так называемую буквицу (когда первая буква в абзаце отличается большим размером и цветом). Для этого можно будет прописать следующие CSS плавила для данного селектора псевдоэлемента:

p:first-letter {font-size:5em; float:left; color:red}

Про Em, Ex, пиксели и другие размерности в CSS мы с вами уже говорили. Исходный код с добавленными свойствами тогда будет выглядеть так:

А сама вебстраница с буквицей, созданной с помощью селектора first-letter, будет выглядеть так:

Два оставшихся псевдоэлемента after и before нужны для формирования контента на лету. Давайте посмотрим на примере:

p:after {
content: " KtoNaNovenkogo.ru";
color:red;
}

В результате, в конце каждого абзаца на вебстранице автоматически добавится тот фрагмент, который мы указали в CSS свойстве «content» (оно используется только для псевдоэлементов after и before) и этот фрагмент будет окрашен в красный цвет:

Если бы мы вместо «after» использовали бы «before», то дополнительный контент был бы добавлен внутри каждого абзаца на странице, но уже перед его содержимым. Напрашивается вопрос — а для чего это можно использовать на практике?

Оказывается, с помощью этих псевдоэлементов можно, например, создать сложную нумерацию вида «5.2.13». Обычными средствами Html этого сделать нельзя, а с использованием before — можно.

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

Но при этом имеет место быть сложный код CSS стилей с использованием, естественно, псевдоэлементов after и before:

Все очень здорово, но, к сожалению, after и before не поддерживаются в браузерах IE 6 и IE 7. Увы и ах. В следующей статье мы поговорим про комбинации CSS селекторов и их приоритетность.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Всегда используйте :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.

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

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

Стиль наведения, фокуса и активного состояния по-разному

Я стилизовал : hover , : focus и : active состояний в течение многих лет. Не могу вспомнить, когда я начала так укладывать. Вот код, который я всегда использую:

  // Не лучший подход. Я объясню почему в этой статье
.selector {
  &: навести,
  &: фокус,
  &: active {
    // Стили здесь
  }
}
  

По мере того как я уделял больше внимания доступности клавиатуры (и, следовательно, уделял больше внимания фокусировке), я начал думать, что мы не должны одинаково оформлять наведение, фокус и активные состояния.

Наведение, фокус и активное состояние должны иметь разные стили.

Причина проста: это разные государства!

Сегодня я хочу показать вам волшебный способ легко стилизовать все три состояния.

Начнем с : наведите курсор на .

Стилизация состояний при наведении

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

Состояния наведения обычно представлены изменением цвета фона (и / или цвета ) .Разница в состояниях не должна быть очевидной, потому что пользователи уже знают, что они на что-то ориентируются.

  кнопка {
  цвет фона: #dedede;
}

button: hover {
  цвет фона: #aaa;
}
  

Стилизация состояний фокуса

: фокус активируется, когда элемент получает фокус. Элементы могут получать фокус двумя способами:

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

Фокусируемые элементы:

1. Ссылки ( )
2. Кнопки ( )
3. Элементы формы ( ввод , текстовое поле и т. Д.)
4. Элементы с tabindex

Вот несколько важных моментов, на которые следует обратить внимание:

1. Пользователи не могут перейти в элемент с tabindex = "- 1" , но они могут щелкнуть по нему. Щелчок вызывает фокус.
2. В Safari и Firefox (Mac) щелчки не фокусируются на элементе . Больше информации здесь.
3. Когда вы щелкаете ссылку ( ), фокус остается на ссылке, пока вы не уберете палец с мыши.Когда вы поднимаете палец, фокус перенаправляется в другое место, если href указывает на действительный id на той же странице.

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

Когда пользователь переходит на вкладку, он не знает, на что будет направлен фокус. Им остается только догадываться. Вот почему нам нужно заметно изменить внимание пользователя к сфокусированному элементу .

Стиль фокуса по умолчанию в большинстве случаев подходит.Если вы хотите создать собственный фокус, подумайте об этих четырех вещах:

1. Добавление контура
2. Создание анимации с движением
3. Изменение цвета фона
4. Изменение цвета

Поскольку background-color и color часто меняются вместе с : hover , имеет смысл, что контуры или анимации должны сопровождать : focus .

Вы можете использовать комбинацию свойств outline , border и box-shadow для создания приятных стилей фокуса.Я рассказываю, как это сделать, в «Создание собственного стиля фокуса».

  кнопка {
  цвет фона: #dedede;
}

button: hover {
  цвет фона: #aaa;
}

button: focus {
  наброски: нет;
  box-shadow: 0 0 0 3px lightskyblue;
}
  

Стилизация активных состояний

Когда вы взаимодействуете с вещами в реальной жизни, вы ожидаете какой-то обратной связи. Например, если вы нажмете кнопку, вы ожидаете, что она будет нажата.

Этот отзыв полезен и для веб-сайтов.Вы можете стилизовать момент «нажатия кнопки» с : активно . : активный триггер срабатывает при взаимодействии с элементом . Здесь взаимодействие означает:

1. Удерживая левую кнопку мыши на элементе (даже не фокусируемом)
2. Удерживание клавиши пробела (на кнопках)

  кнопка: активна {
  цвет фона: # 333;
  цвет границы: # 333;
  цвет: #eee;
}
  

Две странные вещи, на которые следует обратить внимание:

1. Удерживая нажатой клавишу «Пробел», активирует : активный на кнопках, а удерживание клавиши «Enter» — нет.
2. Ввести триггерные ссылки, но не создать активное состояние. Пробел вообще не запускает ссылки.

Стили по умолчанию для ссылок

Ссылки имеют активный стиль по умолчанию. Они становятся красными при нажатии.

Взаимосвязь между активным и сосредоточенным

Когда вы удерживаете левую кнопку мыши на фокусируемом элементе, вы запускаете активное состояние . Вы также запускаете состояние фокуса одновременно.

Когда вы отпускаете левую кнопку мыши, фокус остается на элементе

👆 верно для большинства элементов, на которые можно сфокусироваться, кроме ссылок и кнопок.

Для ссылок:

1. Когда вы удерживаете левую кнопку мыши: триггеры : активны и : фокус состояние в Firefox и Chrome Активны только триггеры в Safari (проверено только на Mac)
2. Когда вы отпускаете левую кнопку мыши: : фокус остается на ссылке (если href ссылки не соответствует id на той же странице).В Safari фокус возвращается к .

Для кнопок:

1. Когда вы удерживаете левую кнопку мыши: триггеры : активные и : фокус только на Chrome. Не запускает : фокус вообще в Safari и Firefox (Mac). Я писал об этом странном поведении здесь.

Если вы хотите, чтобы клики фокусировались на кнопках, вам нужно добавить этот JavaScript как можно раньше. (Что касается того, почему, вы можете прочитать статью, на которую я ссылался выше, для получения дополнительной информации).

  document.addEventListener ('щелчок', событие => {
  if (event.target.matches ('button')) {
    event.target.focus ()
  }
})
  

После того, как вы получите этот код, поведение кнопок при нажатии станет:

1. Если удерживать левую кнопку мыши: запускает : активен во всех браузерах. Триггеры : сфокусируйте только на Chrome.
2. Когда вы отпускаете левую кнопку мыши: Триггер : фокус на Safari и Firefox (Mac). : фокус остается на кнопке для других браузеров.

Поведение кнопки в Safari после добавления фрагмента кода JavaScript выше.

Теперь вы знаете о состояниях наведения, фокуса и активных состояний, я хочу поговорить о стилизации всех трех.

Волшебное сочетание

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

 . Элемент: hover,
.element: active {
  / * Изменить цвет фона / текста * /
}

.element: focus {
  / * Показать схему / *
}
  

Для пользователей мыши:

1. Когда пользователь наводит курсор на элемент, изменяется background-color (и / или color ).Они получают обратную связь.
2. Когда пользователь щелкает элемент, отображается контур фокуса. Они получают обратную связь.

Для пользователей клавиатуры:

1. Когда пользователь входит в элемент, отображается контур фокуса. Они получают обратную связь.
2. Когда они взаимодействуют с элементом, изменяется background-color (и / или color ). Они получают обратную связь.

Лучшее из обоих миров!

1. Я не тестировал полностью магическую комбинацию. Это проверка правильности концепции. Буду признателен, если вы поможете мне с тестами и дадите мне знать, как дела.
2. Если вы запускаете тесты, не используйте Codepen. Состояния фокуса для ссылок на Codepen странные. Если вы наводите курсор на ссылку, контур фокуса удаляется. Почему? Я не знаю. Иногда я думаю, что лучше всего протестировать подобные вещи без каких-либо необычных инструментов. Просто старый HTML, CSS, JS.

Немагическая (но может быть лучше) комбинация

Как я уже упоминал выше, нажатие на кнопки ведет себя странно в Safari и Firefox (Mac).Если вы добавили фрагмент кода JavaScript, который я вам показал, волшебная комбинация все еще работает. Но это не идеально.

Для Safari и Firefox (Mac) происходит следующее:

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

Если вы думаете, что этого достаточно, то волшебная комбинация работает. Здесь можно остановиться.

Но если вы думаете, что аффорданса недостаточно, вам нужно стилизовать : hover , : focus и : active отдельно.

  .element: hover {
  / * Изменить цвет фона / текста * /
}

.element: active {
  / * Еще одно изменение цвета фона / текста * /
}

.element: focus {
  / * Показать схему / *
}
  

Поведение кнопки в Safari, если вы стилизовали все три состояния.

Вот и все! Надеюсь, вы узнали что-то сегодня!

Если вам понравилась эта статья, расскажите о ней другу! Поделитесь этим в Twitter. Если вы заметили опечатку, я буду признателен, если вы сможете исправить ее на GitHub. Спасибо!

Как написать: hover во встроенном CSS?

Как написать: hover во встроенном CSS?

Он называется псевдоселектором и используется для выбора всех элементов, когда пользователь наводит указатель мыши на элементы. Его можно использовать на всех элементах. В документе должен быть объявлен элемент , чтобы увидеть работу этого селектора во всех элементах.

Пример 1:

< HTML > < голова > < title > a: наведите указатель мыши на встроенный CSS title > < стиль > h2 { цвет: зеленый; } кузов { выравнивание текста: по центру; } а { текстовое оформление: нет; цвет: зеленый; } стиль > голова > < корпус > < h2 > GeeksforGeeks h2 > < h3 > a: наведение курсора во встроенном CSS h3 > < a href = "#" onMouseOver = "this. style.color = 'красный' « onMouseOut = "this.style.color = 'green'" > GeeksforGeeks a > корпус > html >

Выход:

Пример 2: В этом примере используется JavaScript для отображения содержимого: hover в CSS.Атрибут события onmouseover и onmouseout вызывается для отображения содержимого a: hover.

< HTML > < голова > < title > a: наведите указатель мыши на встроенный CSS title > < стиль > h2 { цвет: зеленый; } кузов { выравнивание текста: по центру; } а { текстовое оформление: нет; цвет: зеленый; } стиль > < скрипт > функция наведения курсора () { документ. getElementById ("gfg"). style.color = "красный"; } функция mouseout () { document.getElementById ("gfg"). Style.color = "green"; } скрипт > голова > < корпус > < h2 > GeeksforGeeks h2 > < h3 > a: наведение курсора во встроенном CSS h3 > < a href = "#" id = "gfg" onmouseover = "mouseover onmouseout = "mouseout ()" > GeeksforGeeks a > корпус > html >

Выход:

Поддерживаемые браузеры: Браузеры, поддерживаемые селектором: hover, перечислены ниже:

• Apple Safari 3. 1
• Google Chrome 4.0
• Firefox 2.0
• Opera 9.6
• Internet Explorer 7.0

CSS: селектор наведения

---

Это руководство по CSS объясняет, как использовать селектор CSS под названием : hover с синтаксисом и примерами.

Описание

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

Синтаксис

Синтаксис CSS-селектора: active:

  элемент: hover {style_properties}  

Параметры или аргументы

элемент

Элемент, на который нацеливается, когда пользователь наводит на него курсор.

style_properties

Стили CSS, применяемые к элементу, когда пользователь наводит на него курсор.

Примечание

• Селектор: hover - это псевдокласс, который позволяет вам выбрать элемент, на который наведен курсор или указатель мыши.
• Сложно применить селектор: hover на сенсорных устройствах.
• Начиная с IE4, селектор: hover можно было использовать только с тегами . Начиная с IE7, селектор: hover можно использовать со всеми элементами.

Совместимость с браузером

Селектор CSS: hover имеет базовую поддержку в следующих браузерах:

• Хром
• Firefox (Gecko)
• Internet Explorer (IE)
• Opera
• Safari (WebKit)

Пример

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

С тегом

Давайте посмотрим на пример CSS: hover, где мы применяем селектор: hover к тегу .

CSS будет выглядеть так:

  a: hover {цвет: белый; фон: синий; }  

HTML будет выглядеть так:

  

  
 Вот отличный сайт:  checkyourmath.com/index.php"> CheckYourMath.com  
  

Когда тег не наведен, это будет выглядеть так:

Затем, когда вы наводите указатель мыши на тег , селектор: hover будет стилизовать тег следующим образом:

В этом примере: наведите ссылку "CheckYourMath.com "будет отображаться как белый текст с синим фоном только при наведении курсора или указателя мыши.

С тегом

  div: hover {background: yellow; }  

  

  
 TechOnTheNet.com предоставляет полезные ссылки, инструкции и часто задаваемые вопросы с 2003 года.Мы ориентируемся на такие технологии, как Microsoft Access, Microsoft Excel, Microsoft Word, SQL, Oracle / PLSQL, MySQL, HTML, CSS и язык C. 


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

  а {
  цвет: зеленый;
}

a: hover {
  цвет: желтый;
}
  

  p: hover {
  цвет фона: зеленый;
}

.gator: hover {
  font-weight: жирный;
}

#cayman: hover {
  font-size: 2rem;
}

Вход.gator [type = "text"]: hover {
  граница: сплошной желтый 1px;
}

input.gator [type = "text"]: hover span {
  граница: сплошной черный цвет 2px;
}

  

  а {
  цвет: зеленый;
}

a: hover {
  цвет: желтый;
}

a: active {
  цвет: фиолетовый;
}
  

  а {
  цвет: зеленый;
}

a: active {
  цвет: фиолетовый;
}

a: hover {
  цвет: желтый;
}

  

  Выбор всех свойств  
  transition-property  принимает особое значение:  все . Когда  все  указаны, любое изменяемое свойство CSS будет перенесено. 
 
 Может возникнуть соблазн использовать это значение, поскольку оно экономит нам много времени при вводе при анимации нескольких свойств, но  я рекомендую не использовать его.  
 
 По мере развития вашего продукта вы (или кто-то из вашей команды), вероятно, в какой-то момент в будущем обновите этот код. Неожиданная анимация могла проскользнуть. 
 
 Анимация как соль: слишком много ее портит блюдо.Стоит быть действительно точным с анимируемыми свойствами. 
 
 Когда мы говорим элементу перейти из одной позиции в другую, браузеру необходимо определить, как должен выглядеть каждый «промежуточный» фрейм. 
 
 Например: предположим, что мы перемещаем элемент слева направо в течение 1 секунды. Плавная анимация должна работать со скоростью 60 кадров в секунду *, что означает, что нам нужно придумать 60 отдельных позиций между началом и концом. 
 
 Давайте начнем с того, что они будут равномерно распределены: 
 
 Щелкните меня! 
 
 Чтобы прояснить, что здесь происходит: каждый блеклый кружок представляет момент времени. Когда круг перемещается слева направо, это кадры, которые были показаны пользователю. Это как флипбук. 
 
 В этой анимации мы используем линейную функцию синхронизации  . Это означает, что элемент движется с постоянной скоростью; наш круг перемещается на одинаковую величину каждый кадр. 
 
 В CSS доступно несколько функций времени. Мы можем указать, какой из них мы хотим использовать со свойством  transition-time-function : 
 
 
 Или мы можем передать его напрямую в сокращенное свойство  transition : 
 
 
  linear  редко бывает лучшим выбором - в конце концов, в реальном мире почти ничего не движется в эту сторону *.Хорошая анимация имитирует мир природы, поэтому мы должны выбрать что-то более органичное! 
 
 Давайте пробежимся по нашим вариантам. 
 
 
  
 Ссылка на эту рубрику 
 легкость выхода  
  легкость выхода  влетает, как дикий бык, но у него заканчивается энергия.  В конце концов, он корчит, как сонная черепаха. 
 
 Попробуйте прокрутить по временной шкале; обратите внимание, насколько резкое движение получается в первых нескольких кадрах и насколько оно становится незаметным к концу. 
 
 Если бы мы изобразили смещение элемента во времени, это выглядело бы примерно так: 
 
  Когда вы использовали бы  смещения ?  Чаще всего используется, когда что-то поступает за пределами экрана (например,модальное появление). Создается впечатление, что что-то ворвалось издалека и останавливается перед пользователем. 
 
 
  
 Ссылка на этот заголовок 
 easy-in  
  easy-in , что неудивительно, является противоположностью  easy-out . Он запускается медленно и ускоряется: 
 
 Как мы видели,  easy-out  полезен для вещей, которые видны за пределами экрана.  easy-in , естественно, пригодится для обратного: перемещения чего-либо за пределы области просмотра. 
 
 Эта комбинация полезна, когда что-то входит и выходит из области просмотра, например, модального окна. Вскоре мы рассмотрим, как смешивать и согласовывать функции синхронизации. 
 
 Обратите внимание, что  easy-in  в значительной степени используется исключительно для анимаций, которые заканчиваются закадровым или невидимым элементом; в противном случае резкая остановка может вызвать раздражение. 
 
 
  
 Ссылка на эту рубрику 
 easy-in-out  
 Next up,  easy-in-out . Это комбинация двух предыдущих функций синхронизации: 
 
 Эта функция синхронизации  симметричная .У него равное количество ускорений и замедлений. 
 
 Я считаю эту кривую наиболее полезной для всего, что происходит в цикле (например, когда элемент постепенно появляется и исчезает, снова и снова). 
 
 Это большой шаг вперед по сравнению с  linear , но прежде, чем вы начнете использовать его во всем, давайте рассмотрим еще один вариант.  
 
 Если бы у меня была своя точка зрения от авторов языка CSS, когда дело доходит до переходов, так это то, что  easy  плохо назван. Это совсем не описательно; буквально все функции тайминга - это те или иные облегчения! 
 
 Помимо этой придирки,  easy  - это здорово.В отличие от  easy-in-out , он не симметричен; он имеет кратковременное ускорение и  лот  замедления. 
 
   easy  - значение по умолчанию  - если вы не укажете функцию синхронизации, будет использоваться  easy . Честно говоря, мне это кажется правильным.  easy  - отличный вариант в большинстве случаев. Если элемент перемещается, но не входит в область просмотра и не выходит из нее, обычно хорошим выбором будет  easy . 
  Время постоянно  
 Важное замечание обо всех этих демонстрациях:  время постоянно .Функции синхронизации описывают, как значение должно переходить от 0 до 1 за фиксированный интервал времени, а не , а не , как быстро должна завершиться анимация.  Некоторые функции времени могут казаться быстрее или медленнее, но в этих примерах все они выполняются ровно за 1 секунду. 
 
 
  
 Ссылка на этот заголовок 
 Пользовательские кривые  
 Если предоставленные встроенные параметры не соответствуют вашим потребностям, вы можете определить свою собственную кривую плавности, используя функцию синхронизации кубической кривой Безье! 
 
 
 Все значения, которые мы видели до сих пор, на самом деле являются просто предустановками для этой функции  кубической кривой Безье .Требуется 4 числа, представляющих 2 контрольные точки. 
 
 Кривые Безье действительно хороши, но они выходят за рамки этого руководства. Но я скоро напишу о них больше! 
 
 А пока вы можете начать создавать свои собственные временные функции Безье, используя этот замечательный помощник от Lea Verou: 
 
 Как только вы придумаете кривую анимации, которая вас устраивает, нажмите «Копировать» вверху и вставьте ее в ваш CSS! 
 
 Вы также можете выбрать из этого расширенного набора функций синхронизации. Но будьте осторожны: некоторые из наиболее диковинных вариантов не работают в CSS. 
 
 Начиная с пользовательских кривых Безье, может быть трудно придумать кривую, которая кажется естественной. Однако с некоторой практикой это невероятно выразительный инструмент  . 
  Мне пора прийти в себя  
 Я должен признаться: приведенные выше демонстрации, показывающие различные функции синхронизации, были преувеличены. 
 
 По правде говоря, временные функции, такие как  easy-in , более тонкие, чем изображено, но я хотел подчеркнуть эффект, чтобы облегчить понимание.Это стало возможным благодаря функции синхронизации  cubic-bezier ! 
 Показать еще   
 Ранее мы упоминали, что анимация должна работать со скоростью 60 кадров в секунду. Однако когда мы проводим вычисления, мы понимаем, что это означает, что у браузера есть только 16,6 миллисекунды для рисования каждого кадра. На самом деле времени совсем немного; для справки, моргание занимает около 100-300 мсек! 
 
 Если наша анимация слишком затратна в вычислительном отношении, она будет казаться рывкой и заиканием.  Рамки упадут, так как устройство не успеет.
 
 Убедитесь в этом сами, настроив новый элемент управления «Число кадров в секунду»: 
 
 На практике низкая производительность часто проявляется в виде  переменной частоты кадров , так что это не идеальное моделирование. 
 
 Анимация - это удивительно глубокая и интересная область, выходящая далеко за рамки этого вводного руководства. Но давайте рассмотрим абсолютно важные моменты, которые необходимо знать: 
 
 
 
 Некоторые свойства CSS намного дороже анимировать, чем другие.Например, высота   - очень дорогое свойство, поскольку оно влияет на макет. Когда высота элемента уменьшается, это вызывает цепную реакцию; всем его братьям и сестрам также нужно будет подняться, чтобы заполнить пространство! 
 
 
 
 Другие свойства, например  background-color , анимировать несколько дорого. Они не влияют на макет, но требуют свежего слоя краски на каждой раме, что недешево. 
 
 
 
 Два свойства -  transform  и  opacity  - анимировать очень дешево. Если анимация в настоящее время настраивает свойство, такое как  width  или  left ,  можно значительно улучшить , переместив его в  transform  (хотя не всегда можно добиться того же эффекта). 
 
 
 
 Обязательно протестируйте анимацию на самом низком устройстве, на которое нацелен ваш сайт / приложение. Ваша машина разработки, вероятно, во много раз быстрее ее. 
 
 
 
 Если вам интересно узнать больше о производительности анимации, я выступал на эту тему на React Rally.Он углубляется в эту тему: 
  
 
  
 Ссылка на этот заголовок 
 Аппаратное ускорение  
 В зависимости от вашего браузера и ОС вы могли заметить любопытное небольшое несовершенство в некоторых из предыдущих примеров: 
 
  Pay close внимание к буквам.   Обратите внимание, как они выглядят слегка глючными в начале и в конце перехода, как будто все встало на свои места? 
 
 Это происходит из-за переключения между CPU и GPU компьютера.Позволь мне объяснить. 
 
 Когда мы анимируем элемент с помощью преобразования   и непрозрачности  , браузер иногда пытается оптимизировать эту анимацию. Вместо того, чтобы растрировать пиксели в каждом кадре, он передает все на графический процессор в виде текстуры. Графические процессоры очень хороши в выполнении такого рода преобразований на основе текстур, и в результате мы получаем очень гладкую и очень производительную анимацию. Это известно как «аппаратное ускорение». 
 
 Вот проблема: графические процессоры и процессоры  визуализируют вещи немного по-разному.Когда центральный процессор передает его графическому процессору, и наоборот, вы сразу видите, как все немного меняется. 
 
 Мы можем решить эту проблему, добавив следующее свойство CSS: 
 
 
  will-change  - это свойство, которое позволяет нам намекнуть браузеру, что мы собираемся анимировать выбранный элемент и что он должен оптимизировать для этот случай.  
 
 На практике это означает, что браузер позволяет графическому процессору обрабатывать этот элемент  все время . Больше никаких переключений между процессором и графическим процессором, никакой контрольной «фиксации на месте».
 
  will-change  позволяет нам целенаправленно определять, какие элементы следует аппаратно ускорять. У браузеров есть своя непостижимая логика вокруг этого материала, и я бы не хотел оставлять это на волю случая. 
 
 Есть еще одно преимущество аппаратного ускорения: мы можем воспользоваться преимуществом рендеринга субпикселей  . 
 
 Посмотрите эти две анимации ниже. Один выполняется с использованием  margin-top , поэтому аппаратное ускорение невозможно. Заметили разницу между ними? 
 
 Свойства, такие как  margin-top , не могут выполнять субпиксельную визуализацию, что означает, что их необходимо округлять до ближайшего пикселя, создавая ступенчатый эффект резкости. transform , тем временем, может плавно переключаться между пикселями благодаря уловке сглаживания графического процессора.  
  Компромиссы  
 Ничто в жизни не дается бесплатно, и аппаратное ускорение не исключение. 
 
 Передав отрисовку элемента графическому процессору, он потребляет больше видеопамяти, а этот ресурс может быть ограничен, особенно на мобильных устройствах младшего класса. 
 
 Это уже не такая большая проблема, как раньше - я провел несколько тестов на Xiaomi Redmi 7A, популярном бюджетном смартфоне в Индии, и, похоже, он работает нормально.Только не применяйте  будет широко использовать  к элементам, которые не двигаются. Обдумайте, где вы его используете. 
  Альтернативные свойства  
 Аппаратное ускорение существует уже давно - фактически, дольше, чем свойство  изменит свойство ! 
 
 В течение долгого времени это осуществлялось с помощью трехмерного преобразования, такого как  transform: translateZ (0px) . Даже со значением 0px браузер по-прежнему передает его графическому процессору, поскольку перемещение в трехмерном пространстве определенно является сильной стороной графического процессора. Также есть  backface-visibility: скрыто . 
 
 Когда вышел  will-change , он должен был дать разработчикам правильный, семантически значимый способ намекнуть браузеру на необходимость оптимизации элемента. Однако на начальном этапе с  будет заменен  с некоторыми проблемами. 
 
 К счастью, похоже, что все эти проблемы были решены. Я провел некоторое тестирование и обнаружил, что получаю лучшие результаты в современных браузерах с  будет заменять .Но вам всегда следует проводить собственное тестирование, чтобы убедиться, что эти методы работают на целевых устройствах и браузерах. 
 
 
  
 Ссылка на этот заголовок 
 Движение, управляемое действием  
 Давайте еще раз взглянем на нашу поднимающуюся кнопку «Hello World». 
 
 Hello World 
 
 В его нынешнем виде у нас есть «симметричный» переход - анимация входа такая же, как анимация выхода: 
 
 
   
 При наведении указателя мыши на элемент он смещается вверх на 10 пикселей.  250 мс 
 
 
   
 Когда мышь отодвигается, элемент смещается вниз на 10 пикселей за 250 мс 
 
 
 
 Маленькая милая деталь - дать каждому действию собственные настройки перехода.Для анимации наведения мне нравится делать анимацию входа быстрой и быстрой, в то время как анимация выхода может быть немного более расслабленной и вялой: 
 
 Другой распространенный пример - модальные окна. Для модальных окон может быть полезно входить с анимацией  easy-out  и выходить с более быстрой анимацией  easy-in : 
 
 Это небольшая деталь, но она говорит о гораздо большей идее. 
 
 Я считаю, что большинство разработчиков думают в терминах  состояний : например, вы можете посмотреть на эту ситуацию и сказать, что у нас есть состояние «зависания» и состояние по умолчанию.Вместо этого, что, если бы мы думали в терминах  действий ? Мы анимируем, основываясь на том, что делает пользователь, думая в терминах событий, а не состояний.  У нас есть анимация ввода мыши и анимация выхода мыши. 
 
 Тобиас Алин показывает, как эта идея может создать семантически значимую анимацию следующего уровня в своем блоге Meaningfun Motion with Action-Driven Animation. 
 
 
  
 Ссылка на этот заголовок 
 Задержки  
 Что ж, мы довольно далеко продвинулись в своем стремлении стать профессиональными с переходами CSS, но есть пара заключительных деталей, которые нужно обсудить.Поговорим о задержках перехода. 
 
 Я считаю, что почти каждый уже сталкивался с этим разочаровывающим опытом раньше: 
 
  Изображение предоставлено Беном Каменсом  
 
 Как разработчик, вы, вероятно, можете понять, почему это происходит: раскрывающееся меню остается открытым только при наведении курсора! Когда мы перемещаем мышь по диагонали для выбора дочернего элемента, наш курсор уходит за пределы, и меню закрывается. 
 
 Эту проблему можно решить довольно элегантным способом, не прибегая к JS. Мы можем использовать  transition-delay ! 
 
 
  transition-delay  позволяет нам сохранять статус-кво в течение короткого интервала. В этом случае, когда пользователь перемещает указатель мыши за пределы  .dropdown-wrapper , в течение 300 мс ничего не происходит. Если их мышь повторно входит в элемент в пределах этого окна 300 мс, переход никогда не происходит. 
 
 По прошествии 300 мс переход   срабатывает нормально, и выпадающий список исчезает более 400 мс. 
  Почему без стенографии?  
 До сих пор мы использовали сокращение  transition  для объединения всех наших значений, связанных с переходом. transition-delay  также можно использовать с сокращением: 
 
 Показать еще   
 
  
 Ссылка на этот заголовок 
 Мерцание Doom  
 Когда элемент перемещается вверх или вниз при наведении курсора, мы должны быть очень осторожны.  не вводите случайно «мерцание судьбы»: 
 
  Предупреждение:  Этот GIF-файл содержит мерцающие движения, которые потенциально могут вызвать приступы у людей с светочувствительной эпилепсией. 
 Reveal 
 Возможно, вы заметили похожий эффект на некоторых демонстрациях на этой странице! 
 
 Неполадка возникает, когда мышь приближается к границе элемента.Эффект наведения выводит элемент из-под мыши, в результате чего он падает обратно под мышью, что вызывает повторное срабатывание эффекта наведения… много раз в секунду. 
 
 Как решить эту проблему? Уловка состоит в том, чтобы отделить триггер   от эффекта  . Вот быстрый пример: 
 
 У нашего    теперь есть новый дочерний элемент,  .background . Этот промежуток содержит все косметические стили (цвет фона, шрифт и т. Д.).
 
 Когда мы наводим курсор мыши на обычную кнопку, это заставляет ребенка выглядывать сверху. Однако кнопка остается неподвижной.  
 
  Попробуйте раскомментировать схему  , чтобы увидеть, что именно происходит!  
 
 Когда я вижу хорошо созданную анимацию в Интернете, я реагирую с восторгом и ликованием. Однако люди разные, и у некоторых людей  очень разные реакции: тошнота и недомогание. 
 
 Я уже писал ранее о соблюдении «предпочитает уменьшенное движение», настройки уровня ОС, которые пользователи могут переключать, чтобы выразить предпочтение меньшему движению.Давайте применим эти уроки здесь, отключив анимацию для людей, которые ее запрашивают: 
 
 
 Эта небольшая настройка означает, что анимация разрешится немедленно для пользователей, которые вошли в свои системные настройки и установили флажок. 
 
 Как разработчики интерфейса мы несем определенную ответственность за то, чтобы наши продукты не причиняли вреда. Это быстрый шаг, который мы можем предпринять, чтобы сделать наши сайты / приложения более дружелюбными и безопасными. 
 
 CSS-переходы фундаментальны, но это не значит, что они легкие. В них есть удивительная глубина; даже в этом длинном посте в блоге мне пришлось вырезать кое-что, чтобы сделать его управляемым! 
 
 Веб-анимация важнее, чем думает большинство разработчиков. Единственный переход здесь или там не сделает и не испортит опыт, но он складывается. В совокупности хорошо выполненная анимация может оказать удивительно глубокое влияние на общее впечатление пользователя. 
 
 Переходы могут сделать приложение "реальным". Они могут предложить обратную связь и общаться более интуитивно, чем просто копировать.Они могут научить людей пользоваться вашими продуктами. Они могут вызвать радость. 
 
 Если вам понравился этот урок, возможно, вам будет приятно узнать, что  Я создаю курс CSS ! Мой курс специально создан для разработчиков JavaScript, и это комплексный курс с нуля, который научит вас становиться уверенным и бесстрашным с помощью CSS. 
 
 Он построен на том же стеке технологий, что и этот блог, поэтому имеет тот же стиль встроенных интерактивных виджетов, но идет еще дальше. В моем курсе есть видео, мини-игры, мастер-классы и многое другое. 
 
 Вы можете узнать больше на официальном сайте CSS для разработчиков JavaScript. 
 
 Наконец, ни одно интерактивное занятие не обходится без «режима песочницы»! Поиграйте со всеми предыдущими настройками (и парой новых!) И создайте генеративное искусство с помощью этого открытого виджета: 
 Функция синхронизации supercharged) easy-in-out (supercharged) overshotShapeCircleSquare 
 Ghost Opacity 
 
 Когда применяются псевдоклассы: hover,: focus и: active? 
 
         
 Когда мы выбираем элемент по его .class  или  #id , мы используем предопределенные и неизменные атрибуты, встроенные в DOM. С помощью псевдоклассов мы можем выбирать элементы, используя информацию, которой еще нет в DOM, и которая может изменяться в зависимости от того, как пользователь взаимодействует со страницей. 
 
 : hover , : focus  и : active  - это псевдоклассы, которые определяются действиями пользователя.  Каждый из них соответствует очень конкретной точке того, как пользователь будет взаимодействовать с элементом на странице, таким как ссылка, кнопка или поле ввода.
 
 При том диапазоне устройств ввода, который у нас есть сегодня, эти псевдоклассы также ведут себя немного по-разному в зависимости от того, взаимодействует ли пользователь с элементом с помощью мыши 🐭, клавиатуры ⌨️ или сенсорного экрана 📱, что может затруднить понимание того, как и когда стилизовать эти ситуации. 
  
 Когда 
: применяется наведение   
 
 Псевдокласс : hover , также называемый «псевдоклассом наведения указателя», применяется, когда указывающее устройство взаимодействует с элементом, не обязательно его активируя.
 
 Типичным примером этого является наведение курсора мыши на элемент. Если навести указатель мыши на кнопку ниже, вы увидите, что она станет желтой. 
 
  кнопка: hover {background-color: # ffdb3a; }
  
Если ты наведешься надо мной, я стану желтым
 На мобильном устройстве 📱 вы можете выполнить только одно взаимодействие с любым интерактивным элементом - это коснуться / щелкнуть его. Вы можете заметить, что если вы нажмете на кнопку выше, она также изменит цвет, несмотря на то, что вы не «просто» наводите на нее курсор.Это связано с тем, что на мобильных устройствах события, запускающие эти псевдоклассы, могут сливаться. Мы также увидим : focus  и : активные псевдоклассы .
 Наконец, для пользователей клавиатурных устройств ⌨️ псевдокласс : hover  никогда не запускается. Клавиатура не считается устройством «указатель» и поэтому не может применяться к этому псевдоклассу наведения указателя.
 Когда 
: применяется фокус 
 Псевдокласс : focus  применяется, когда элемент находится в состоянии, готовом к взаимодействию, т.е.е. он находится в фокусе устройства ввода. Когда это применимо, разные устройства ввода сильно различаются.
 При использовании мыши 🐭 или аналогичного указывающего устройства псевдокласс : focus  будет применяться после того, как пользователь начал активировать элемент, и, что важно, он будет продолжать оставаться в фокусе, пока пользователь не активирует другой элемент. Например, если вы нажмете мышью на кнопку ниже, вы заметите, что она станет желтой, как только вы начнете кликать. Кнопка вернется в состояние по умолчанию, только если вы нажмете где-нибудь на странице.
  кнопка: фокус {цвет фона: # ffdb3a; }
  
Нажми на меня!
 Для пользователей клавиатуры ⌨️ фокусировка на элементе очень похожа на наведение курсора на него для пользователей мыши. Мне нравится думать о псевдоклассе : focus  как о состоянии наведения курсора для клавиатурных устройств, потому что он сигнализирует о схожем намерении взаимодействия.
 Для пользователей сенсорных экранов 📱 псевдокласс : focus  снова применяется, когда пользователь нажимает на элемент. Однако следует отметить, что это не относится к мобильному браузеру Safari.
 Когда 
: применяется активный 
 Наконец, псевдокласс : active  применяется в течение периода, в течение которого элемент активируется. Например, при использовании мыши 🐭 это будет время между нажатием кнопки мыши и ее отпусканием.
 Если вы быстро нажмете кнопку ниже, вы можете не заметить кратковременное изменение цвета, но если вы нажмете и сохраните, вы увидите, когда применяется псевдокласс.
  кнопка: активна {background-color: # ffdb3a; }
  
Нажми на меня!
 Псевдокласс : active  работает таким же образом для взаимодействия с мышью и клавиатурой.
 На мобильных устройствах 📱, таких как псевдокласс : focus , псевдокласс : active  применяется к нажатию на элемент. И опять же, это вообще не работает в мобильном браузере Safari.
 Объединение 
: hover , : focus  и : active 
 Возможно, вы заметили, что условия, в которых может применяться каждый из этих псевдоклассов, не исключают друг друга. Фактически, в большинстве случаев, когда элемент щелкают мышью, выполняются все три условия - указатель мыши находится над элементом, элемент находится в фокусе и элемент активируется.
 Мы можем проверить это, изменив фон кнопки, только если выполняются все три условия.
  button: hover: focus: active {
  цвет фона: # ffdb3a;
}
  
 Если вы нажмете и удерживаете кнопку ниже, вы увидите, что она станет желтой. Но если вы нажмете и удерживаете, отводя указатель мыши от наведения на него, вы увидите, что он потеряет цвет.
 Щелкните меня, удерживайте, затем перетащите указатель мыши
 Эта возможность комбинировать псевдоклассы может быть действительно полезной для точной настройки того, как мы хотим стилизовать различные состояния.
 Порядок стилей - 
: наведение , затем : фокус , затем : активный 
 В связи с тем, что эти условия могут применяться и часто применяются одновременно, порядок, в котором мы добавляем эти стили, важен.
 Допустим, у нас есть следующие стили:
  кнопка: активна {
  цвет фона: зеленый;
}

button: focus {
  цвет фона: синий;
}

button: hover {
  цвет фона: красный;
}
  
 Будут видны только стили: hover
 Попробуйте получить стили наведения, фокус и активные стили
 Когда вы наводите курсор и взаимодействуете с элементом выше, только стили, примененные к : hover , будут преобладать, пока вы все еще наведете на него курсор. Как мы видели, поскольку все три события применяются во время типичного события щелчка, каскад вступает во владение и побеждает последний определенный стиль.
 Вот почему важно определять эти стили в том порядке, в котором они обычно встречаются, чтобы пользователю было понятно, когда распознается новое взаимодействие. Обычно пользователь сначала наводит курсор на элемент, затем переводит его в фокус, а затем активирует его. Итак, лучший способ упорядочить стили псевдокласса: : hover , затем : focus , затем : active .
  button: hover {
  цвет фона: зеленый;
}

button: focus {
  цвет фона: синий;
}

button: active {
  цвет фона: красный;
}
  
 Все стили будут видны
 Попробуйте получить стили наведения, фокус и активные стили
 Обзор 
 Псевдоклассы : hover , : focus  и : active  позволяют нам стилизовать элементы в зависимости от того, как с ними взаимодействует пользователь. В зависимости от используемого устройства эти псевдоклассы становятся активными в разных точках (или не активируются вообще).
 : парение 
 : фокус 
 : активный 
 Мышь 🐭
 Есть
 Есть
 Есть
 Клавиатура ⌨️
 №
 Есть
 Есть
 Сенсорный экран 📱
 Да (при нажатии)
 Да * (при нажатии)
 Да * (при нажатии)
  * Не применяется на мобильных устройствах (iOS) Safari 
 Как изменить курсор при наведении в CSS 
 Фрагменты
 ›
 CSS
›
 org/ListItem"> Как изменить курсор при наведении в CSS
 Практически все веб-сайты меняют курсоры для лучшего взаимодействия с пользователем или просто для весело.Настройка курсоров - это простой способ при необходимости придать сайту изюминку.
 Чтобы указать внешний вид курсора, используйте свойство курсора CSS, которое используется для изменения типа курсора мыши на элементах. Это может быть полезно на веб-сайтах, где нужно выполнять разные действия, а не просто нажимать.
 Мы рассмотрим следующие способы управления удобством использования курсора:
 Как сделать курсор рукой, когда пользователь наводит курсор на элемент списка¶ 
 Если вы хотите превратить указатель мыши в указатель руки при наведении курсора на список item, вы можете установить класс для своего элемента списка (
) и определить стиль только для него.Но если вы хотите иметь указатель в виде руки для всех элементов вашего списка, просто установите стиль для элемента
.
 Теперь давайте рассмотрим пример изменения указателя мыши на указатель руки с помощью значения «указатель» свойства  cursor . Мы устанавливаем этот тип курсора только для класса «указатель».
 Пример замены указателя мыши на указатель руки: ¶ 
  

  
    
    <стиль>
      li {
        нижнее поле: 15 пикселей;
      }
      li.указатель {
        курсор: указатель;
      }
      li: hover {
        цвет фона: #ccc;
      }
    
  
  
     
 Наведите указатель мыши на элементы списка, чтобы увидеть, как курсор по умолчанию превращается в указатель: 
 
    

      
 Элемент списка 1 с курсором по умолчанию. 
      
 Элемент списка 2 с указателем курсора. 
      
 Еще один элемент списка с курсором мыши по умолчанию.
    
 
  
Попробуйте сами »
 Результат 
 Наведите курсор на элементы списка, чтобы увидеть, как курсор по умолчанию изменится на указатель: 
 Элемент списка 1 с курсором по умолчанию.
 Элемент списка 2 с курсором-указателем.
 Еще один элемент списка с курсором мыши по умолчанию.
 В следующем примере используется селектор: nth-child. Здесь мы используем  nth-child (odd)  для курсора: progress; и  nth-child (четный)  для курсора: указатель; иметь отдельные типы курсоров для разных элементов списка.
 Пример использования указателя и курсоров прогресса: ¶ 
  

  
    
    <стиль>
      li: nth-child (odd) {
        фон: # 1c87c9;
        курсор: прогресс;
        ширина: 50%;
        отступ: 5 пикселей;
      }
      li: nth-child (even) {
        фон: #ccc;
        курсор: указатель;
        ширина: 50%;
        отступ: 5 пикселей;
      }
    
  
  
    
 Наведите указатель мыши на элементы списка, чтобы увидеть, как изменяется курсор: 
    

      
 Элемент списка 1 
      
 Элемент списка 2 
      
 Элемент списка 3 
      
 Элемент списка 4 
      
 Элемент списка 5 
      
 Элемент списка 6 
      
 Элемент списка 7 
    
  
  
Попробуйте сами »
 Как изменить курсор гиперссылки при наведении курсора¶ 
 Курсором по умолчанию для гиперссылки является« указатель ». Чтобы изменить его, вам нужно указать тип курсора для вашего элемента  с помощью селектора CSS: hover. В нашем примере мы стилизуем только класс «ссылка».
 Пример изменения «указателя» на «по умолчанию»: ¶ 
  

  
    
    <стиль>
      .link: hover {
        курсор: по умолчанию;
      }
    
  
  
    

      Наведите указатель мыши на гиперссылку, чтобы увидеть, как «указатель» изменится на «по умолчанию»:
    
    

       W3docs 
      ссылка с исходным типом "указатель".
    
    

       W3docs 
      ссылка с измененным типом курсора "по умолчанию".
    
  
  
Попробуйте сами »
 Поскольку по умолчанию ссылки имеют синий цвет и подчеркнуты, мы предлагаем изменить цвета ссылок и продолжить работу с гиперссылками.
 Пример использования типа курсора «захват» на гиперссылке: ¶ 
  

  
    
    <стиль>
      a {
        курсор: захватить;
      }
    
  
  
    
      6203def268a0df2a5fd545.png" alt = "logo" />
    
  
  
Попробуйте сами »
 Как применить пользовательский эффект изображения курсора к элементу¶ 
 Давайте повеселимся с курсорами! Можно добавить изображение в качестве курсора на вашу веб-страницу. Вам просто нужно добавить свое изображение, указав его URL-адрес в качестве значения свойства  cursor .
 Не забудьте установить тип курсора, чтобы он показывал, когда браузер не может использовать предоставленное изображение. В противном случае ваш код не будет работать.
 Это забавный трюк, который можно добавить на свой веб-сайт, когда пользователи не ожидают увидеть такие вещи. Представьте, что у вас есть форма, в которой ответ соответствует определенной эмоции, это идеальное место для использования изображений эмодзи.
 Пример добавления изображения в качестве курсора: ¶ 
  

  
    
    <стиль>
      тело {
        фон: #eee;
        выравнивание текста: центр;
      }
      кнопка {
        дисплей: встроенный блок;
        цвет фона: # 1c87c9;
        цвет: #eee;
        маржа: 25 пикселей;
        положение: относительное;
        ширина: 140 пикселей;
        высота: 45 пикселей;
        радиус границы: 3 пикселя;
        граница: нет;
        размер шрифта: 1.5em;
        выравнивание текста: центр;
        текстовое оформление: нет;
        box-shadow: 0 2px 8px 0 # 999;
      }
      button: hover {
        цвет фона: # 999;
        цвет: # ffcc00;
      }
      #счастливый {
        курсор: url ("/ uploads / media / default / 0001/02 / ee4486d1b3fc998e444c3b0100c73db282760eb5. png"), авто;
      }
      #грустный {
        курсор: url ("/ uploads / media / default / 0001/02 / 38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto;
      }
      #люблю {
        курсор: url ("/ uploads / media / default / 0001/02 / 4be757cf6e9ffc865861649ca423654484ad3dc1.png "), авто;
      }
    
  
  
     
 Какое у вас впечатление о нашем веб-сайте? 
 
     Счастливы 
     Грустно 
     Любовь 
  
  
Попробуйте сами »
 Пример использования значков в качестве курсора: ¶ 
  

  
    
    <стиль>
      тело {
        ширина: 600 пикселей;
        маржа: 0.5эм авто;
      }
      img {
        ширина: 280 пикселей;
        высота: 186 пикселей;
        маржа: 5 пикселей;
        дисплей: встроенный блок;
        фоновая позиция: 50% 50%;
      }
      . собака {
        курсор: url ("/ uploads / media / default / 0001/02 / 53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto;
      }
      .cactus {
        курсор: url ("/ uploads / media / default / 0001/02 / ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), auto;
      }
      .природа {
        курсор: url ("/ uploads / media / default / 0001/02 / edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), авто;
      }
      .жилой дом {
        курсор: url ("/ uploads / media / default / 0001/02 / bb6f118f3b06838624b4297992457093f40fd92b.png"), auto;
      }
    
  
  
    
    
    8e2216c756be155e.png" alt = "dog">
    
Попробуйте сами »
 Вы также можете использовать значки с веб-сайтов, на которых предоставляется код Base64, просто вставив код Base64 в значение URL-адреса курсора. Или загрузите значок на свой веб-сайт и используйте URL-адрес для установки курсора.
 Пример всех типов курсоров¶ 
 Вот пример, который содержит все возможные типы, которые может иметь курсор.
 Для значений «приближение», «уменьшение», «захват» и «захват» добавлено расширение свойства -webkit-.
 Пример использования всех типов курсоров: ¶ 
  

  
    
    <стиль>
      тело {
        выравнивание текста: центр;
        семейство шрифтов: Roboto, Helvetica, Arial, без засечек;
      }
      .cursor {
        дисплей: гибкий;
        flex-wrap: обертка;
      }
      .cursor> div {
        гибкость: 120 пикселей;
        отступ: 10px 2px;
        белое пространство: nowrap;
        граница: 1px solid # 666;
        радиус границы: 5 пикселей;
        маржа: 0 5px 5px 0;
      }
      . cursor> div: hover {
        фон: # 1c87c9;
      }
      .auto {
        курсор: авто;
      }
      .дефолт {
        курсор: по умолчанию;
      }
      .никто {
        курсор: нет;
      }
      .контекстное меню {
        курсор: контекстное меню;
      }
      .помощь {
        курсор: справка;
      }
      .pointer {
        курсор: указатель;
      }
      .прогресс {
        курсор: прогресс;
      }
      .ждать {
        курсор: ждать;
      }
      .клетка {
        курсор: ячейка;
      }
      .crosshair {
        курсор: перекрестие;
      }
      .text {
        курсор: текст;
      }
      .vertical-text {
        курсор: вертикальный текст;
      }
      .alias {
        курсор: псевдоним;
      }
      .copy {
        курсор: копировать;
      }
      .двигаться {
        курсор: двигаться;
      }
      .no-drop {
        курсор: без капли;
      }
      .не положено {
        курсор: не разрешено;
      }
      . all-scroll {
        курсор: all-scroll;
      }
      .col-resize {
        курсор: col-resize;
      }
      .row-resize {
        курсор: изменение размера строки;
      }
      .n-resize {
        курсор: n-изменить размер;
      }
      .e-resize {
        курсор: изменить размер;
      }
      .s-resize {
        курсор: s-изменить размер;
      }
      .w-resize {
        курсор: w-изменение размера;
      }
      .ns-resize {
        курсор: ns-resize;
      }
      .ew-resize {
        курсор: ew-resize;
      }
      .ne-resize {
        курсор: изменить размер;
      }
      .nw-resize {
        курсор: nw-resize;
      }
      .se-resize {
        курсор: изменить размер;
      }
      .sw-resize {
        курсор: sw-resize;
      }
      .nesw-resize {
        курсор: nesw-resize;
      }
      .nwse-resize {
        курсор: nwse-resize;
      }
      .схватить {
        курсор: -webkit-grab;
        курсор: захватить;
      }
      . grabbing {
        курсор: -webkit-grabbing;
        курсор: захватывающий;
      }
      .приблизить {
        курсор: -webkit-zoom-in;
        курсор: увеличение;
      }
      .уменьшить {
        курсор: -webkit-zoom-out;
        курсор: уменьшение масштаба;
      }
    
  
  
     
 Пример свойства курсора 
 
    
 Наведите курсор мыши на элемент, чтобы увидеть изменения: 
    

      
 авто 
      
 по умолчанию 
      
 нет 
      
 контекстное меню 
      
 справка 
      
 указатель 
      
 прогресс 
      
 подождите 
      
 ячейка 
      
 перекрестие 
      
 текст 
      
 вертикальный текст 
      
 псевдоним 
      
 копия 
      
 переместить 
      
 без капли 
      
 не допускается 
      
 all-scroll 
      
 col-resize 
      
 изменение размера строки 
      
 n-изменить размер 
      
 s-изменить размер 
      
 изменить размер 
      
 w-изменение размера 
      
 ns-resize 
      
 ew-resize 
      
 изменить размер 
      
 изменение размера nw 
      
 изменить размер 
      
 sw-resize 
      
 новое изменение размера 
      
 изменение размера nwse 
      
 взять 
      
 захват 
      
 увеличение 
      
 уменьшение 
    
  
  
Попробуйте сами »
 Спасибо за ваш отзыв! 
  Считаете ли вы это полезным?  Да Нет
 Статьи по теме 
 .
No related posts.