Css при наведении: CSS: Hover — эффекты при наведении

Использование :hover | WebReference

На примере ссылок использование :hover выглядит следующим образом.

a { color: green; }
a:hover { color: red; }

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

:hover прекрасно сочетается не только с простыми селекторами элементов, но и с классами, а также работает в комбинациях селекторов, что позволяет на одной веб-странице делать группы ссылок разных видов. В примере 1 ссылки в <header> добавлены без традиционного подчёркивания через свойство text-decoration со значением none. При наведении на эти ссылки добавляется подчёркивание с помощью значения underline. В <footer> ссылки при наведении просто меняют свой цвет.

Пример 1. Использование :hover для ссылок

Рис. 1. Ссылки разных цветов

Надо учитывать, что в некоторых ситуациях :hover может не давать видимого результата, когда он неявно переопределяется. В приведённом стиле :hover не меняет цвет у посещённых ссылок, поскольку псевдокласс :visited располагается в коде ниже :hover.

a { color: green; }
a:hover { color: red; }
a:visited { color: purple; }

Обращайте внимание, что положение в коде влияет на конечный результат. Достаточно поставить :hover ниже :visited и цвет посещённых ссылок при наведении будет меняться на красный.

 a { color: green; }
a:visited { color: purple; }
a:hover { color: red; }

См.

• :focus на мобильных устройствах
• <a>
• text-decoration-skip-ink
• Виды ссылок
• Всплывающая подсказка
• Наследование в CSS
• Нормальное позиционирование
• Переходы с помощью :hover
• Подсветка строк и колонок таблицы
• Псевдокласс :hover
• Псевдоклассы в CSS
• Работа с типографикой
• Селекторы CSS
• Сочетание с псевдоклассами
• Ссылки
• Ссылки
• Ссылки в HTML
• Якоря

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11. 03.2020

Редакторы: Влад Мержевич

Псевдокласс :hover
Ctrl+←

Подсветка строк и колонок таблицы
Ctrl+→

13. Псевдоклассы и контекстные селекторы · Неожиданный HTML

Поскольку объекты страницы могут принимать разные состояния, нам нужны конструкции, которые бы позволяли с этими состояниями работать

:hover – псевдокласс, который срабатывает в тот момент, когда над объектом находится курсор. Например если написать в css-файле

.block{
    background:blue;
    width:100px;
    height:100px;
}
.block:hover {
    background:red;
}

То данный код будет окрашивать div’ы с классом block в красный цвет при наведении на них курсора.

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

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

:focus – срабатывает, когда у элемента с фокусом, например, когда в input’e есть мигающий курсор ввода

<input type="text">

input:focus {
     border:10px solid purple;
}

Контекстные селекторы

Допустим у нас есть блок-корзина и товары. Мы хотим, чтобы товары при перемещении в корзину получали специальное оформление, например обводились границей.

.cart {
    width:400px;
    height:200px;
    background-color:grey;
}
.product {
    width:100px;
    height:100px;
    background-color:cornflowerblue;
}

Но если товар попал в корзину, то должна появится корзина

.cart  .product {  
    border:20px solid black;
}

Контекстные селекторы и псевдоклассы

Можно группировать контекстные селекторы с псевдоклассами.

.big:hover .small {
    background:red;
}

Данное оформление означает, что к элементу .small , который находится внутри .big , на который навели курсор.

Неочевидные моменты

1. При наведении курсора на вложеный элемент, срабатывает hover и на родителе.
2. Селектор в контексте имеет больший приоритет, чем селектор без контекста

Рассмотри следующий css-файл

.parent .block {
    background-color:orange;
}
.block {
    width:100px;
    height:100px;
    background-color:violet;
}

соответствующий ему html

<div>
   <div>
   </div>
</div>

Сначала нам кажется, что блок будет фиолетовым, так как селектор с ним стоит ниже, но засчет контекста, мы получим оранжевый.

Примеры

1. Различные hover-эффекты при наведении на кнопку http://codepen.io/fox_hover/pen/bqZxLa

2. Кнопки с градиентами, которые меняют их при наведении http://codepen. io/pirrera/pen/bqVe

3. Библиотека различных hover-эффектов
   http://ianlunn.github.io/Hover/

Практика:

1. Нужно сделать, чтобы гиперссылка по умолчанию была без подчеркивания, но при наведении начинала подчеркиваться
2. Изменение цвета div’a при наведении
3. Картинка закрыта градиентом. При наведении градиент пропадает.
4. Задаем разные цвета блоков-детей у разных блоков-родителей с помощью контекстных селекторов
5. Строим спрайт. При наведении меняем картинку на ее черно-белую копию

6. При наведении на блок, вложенные блоки показываются

7. Есть картинка на фоне блока. При наведении картинка приближается, блок не увеличивается.

8. Есть меню с вложенными подпунктами. При наведении на пункт меню, появляются его подпункты.
9. Есть картинка при клике на нее, она увеличивается и сохраняет свои размеры до тех пор пока на ней курсор мыши.

CSS :hover Selector — GeeksforGeeks

Просмотреть обсуждение

Улучшить статью

Сохранить статью

• Уровень сложности: Базовый
• Последнее обновление: 12 июл, 2022

Посмотреть обсуждение

Улучшить статью

Сохранить статью

Псевдокласс CSS :hover selector используется для стилизации элементов при наведении на них указателя мыши. Его можно использовать на каждом элементе.

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

Синтаксис:

 элемент :hover{
    // объявления CSS;
} 

Пример 1: Этот пример иллюстрирует изменение цвета фона при наведении курсора на элемент.

HTML

ОБЩИ текст.

HTML

Вывод:

Пример 3: Этот пример иллюстрирует изменение цвета шрифта при наведении курсора на элемент.

HTML

Вывод:

Пример 4: Этот пример иллюстрирует изменение семейства шрифтов текста при наведении на него курсора.

HTML

Вывод:

Пример 5: Этот пример иллюстрирует изменение оформления текста на подчеркивание при наведении курсора.

HTML

Выход:

Поддерживаемые браузеры:

• Google Chrome 1. 0 и выше
9.0009 Microsoft Edge 12.0 и выше
• Mozilla Firefox 1.0 и выше
• Internet Explorer 4.0 и выше
• Safari 2.0 и выше
• Opera 4.0 и выше

 :hover {
  css объявления;
} 

 

  <голова>
    
    <стиль>
      а: наведите {
        цвет фона: #8ebf42;
        цвет: #666;
      }
    
  
  <тело>
     
: пример селектора при наведении
 
     w3docs.com/">W3docs.com
  
 

  <голова> <стиль> а {
 цвет: #1c87c9;
 }
 а: наведите {
 цвет фона: #8ebf42;
 цвет: #еее;
 }   <тело>
: пример селектора при наведении
Lorem Ipsum — это просто фиктивный текст для полиграфии и набора. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным. Он был популярен в 1960-е годы с выпуском листов Letraset, содержащих отрывки из Lorem Ipsum, а совсем недавно — с программным обеспечением для настольных издательских систем, таким как Aldus PageMaker, включая версии Lorem Ipsum.