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

Leave a Comment / Разное / By /

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

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

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

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

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

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Сальса</title> <style> header { background: #e2edc1; } footer { background: #f4783b; } ul { margin: 0; padding: 10px; } li { display: inline; margin-right: 10px; } header a { color: #333391; /* Цвет ссылок */ text-decoration: none; /* Убираем подчёркивание */ } header a:hover { text-decoration: underline; /* Добавляем подчёркивание при наведении */ } footer a { color: #fff; } footer a:hover { color: #333; } </style> </head> <body> <header> <ul> <li><a href=»#»>Uno</a></li> <li><a href=»#»>Dos</a></li> <li><a href=»#»>Tres</a></li> </ul> </header> <main> <p>Сальса — современный социальный танец. Как многие латиноамериканские танцы, сальса экспрессивна, разнообразна и богата импровизацией.
</p> </main> <footer> <ul> <li><a href=»#»>Cinco</a></li> <li><a href=»#»>Seis</a></li> <li><a href=»#»>Siete</a></li> </ul> </footer> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 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+→

Задать hover для svg иконки заданной с помощью object

Cтолкнулась с проблемой невозможности добавить hover для svg иконки html:

<div>
    <object type="image/svg+xml" data="img/social/003-linkedin.svg"></object>
</div>

css:

&__social
    display: inline
    &__facebook
        height: 50px
        width: 50px
        fill:inherit 
        stroke:inherit
        &:hover
            fill: yellow

svg:

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m256 0c-141.363281 0-256 114.636719-256 256s114.636719 256 256 256 256-114.636719 256-256-114.636719-256-256-256zm-74.390625 387h-62.347656v-187.574219h62.347656zm-31.171875-213.1875h-.40625c-20.921875 0-34.453125-14.402344-34.453125-32.402344 0-18.40625 13.
 
 945313-32.410156 35.273437-32.410156 21.328126 0 34.453126 14.003906 34.859376 32.410156 0 18-13.53125 32.402344-35.273438 32.402344zm255.984375 213.1875h-62.339844v-100.347656c0-25.21875-9.027343-42.417969-31.585937-42.417969-17.222656 0-27.480469 11.601563-31.988282 22.800781-1.648437 4.007813-2.050781 9.609375-2.050781 15.214844v104.75h-62.34375s.816407-169.976562 0-187.574219h62.34375v26.558594c8.285157-12.78125 23.109375-30.960937 56.1875-30.960937 41.019531 0 71.777344 26.808593 71.777344 84.421874zm0 0"/></svg>

0

Откройте этот файл в редакторе кода — между тегами svg добавьте ещё два тега

<defs>
  <style></style>
</defs>

и внутри напишите что при наведении вы хотите заменить заливку и даже задержку анимации

<defs>
  <style>
    svg{fill: #000; transition: 0.34s}
    svg:hover{ fill: red;}
 </style>
</defs>

object ведёт себя как iframe и потому некоторые манипуляции с контентом внутри не возможны

Если требуется применять большое количество иконок но лень открывать каждый и писать defs style то можно руками собрать спрайт и использовать не object а use и в этом случае можно манипулировать svg но можно собрать спрайт сборщиком типа webpack или gulp и уже этими средствами работать с наведением

Вот здесь по этой ссылке автор сайта подробно описал все способы подключения svg к странице

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

CSS :hover Селектор

❮ Назад Справочник по селекторам CSS Далее ❯


Пример

Выбор и стиль ссылки при наведении на нее курсора:

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

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

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

Совет: Селектор :hover можно использовать для всех элементов, а не только по ссылкам.

Совет: Используйте селектор :link для оформления ссылок на непосещенные страницы, селектор :visited для стиля ссылки на посещаемые страницы и :active селектор для оформления активной ссылки.

Примечание: :hover ДОЛЖЕН идти после :link и :visited (если они присутствуют) в определении CSS, чтобы быть эффективным!

Версия: CSS1

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:наведение 4,0 7,0 2,0 3. 1 9,6

Примечание: В IE должен быть объявлен чтобы селектор :hover работал с другими элементами, кроме элемента .

Синтаксис CSS

:hover {
 объявления css ;
} Демонстрация

Дополнительные примеры

Пример

Выбор и стиль элемента

,

и

при наведении на него курсора:

p:hover, h2:hover, a:hover {
  background -цвет: желтый;
}

Попробуйте сами »

Пример

Выберите и стилизуйте непосещенные, посещенные, наведенные и активные ссылки:

/* непросмотренная ссылка */
a:link {
  color: green;
}

/* посещенная ссылка */
a:посетили {
  цвет: зеленый;
}

/* указатель мыши над ссылкой */
a:hover {
  color: red;
}

/* выбранная ссылка */
a:active {
  цвет: желтый;
}

Попробуйте сами »

Пример

Ссылки на разные стили:

a. ex1:hover, a.ex1:active {
  цвет: красный;
}

a.ex2:hover, a.ex2:active {
 размер шрифта: 150%;
}

Попробуйте сами »

Пример

Наведите указатель мыши на элемент , чтобы отобразить элемент

(как всплывающую подсказку):

div {

  отображение: нет;
}

span:hover + div {
  display: block;
}

Попробуйте сами »

Пример

Показать и скрыть «выпадающее» меню при наведении курсора мыши:

ul {
  display: inline;
  поля: 0;
  заполнение: 0;
}
ul li {отображение: встроенный блок;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  ширина: 200 пикселей;
  отображение: нет;
}
ул ли уль ли {
  background: #555;
  отображение: блок;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

Попробуйте сами »

Связанные страницы

CSS0 tutorial: CSS0 Links 9

Учебное пособие по CSS: Псевдоклассы CSS

❮ Предыдущий Справочник по селекторам CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

CSS селектор :hover

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

Описание

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

Синтаксис

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

 element:hover { style_properties }

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

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

Примечание

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

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

Пример

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

С тегом

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

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

 a:hover { color: white; фон: синий; }

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

Если на тег не наведен курсор, это будет выглядеть так:

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

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

С тегом

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

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

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