Как прописать :hover внутри style=’ ‘?
Как прописать ему «ховер», к примеру background: #555; прямо внутри style=»» ?
Отслеживать
3,471 2 2 золотых знака 20 20 серебряных знаков 42 42 бронзовых знака
задан 19 июн 2013 в 4:00
7,193 4 4 золотых знака 32 32 серебряных знака 51 51 бронзовый знак
ассоциация: stackoverflow.com/questions/5293280/…
9 мар 2017 в 14:13
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Селекторы псевдоклассов не могут быть описаны прямо в теге. Раз нет возможности подключить стили, используйте события onmouseover и onmouseout .
Dark gray Отслеживать
ответ дан 19 июн 2013 в 4:34
Макс Жуков Макс Жуков
5,543 3 3 золотых знака 24 24 серебряных знака 30 30 бронзовых знаков
Никак, :hover — это псевдокласс.
Отслеживать
ответ дан 19 июн 2013 в 4:28
7,951 17 17 серебряных знаков 19 19 бронзовых знаков
Это — комментарий ,не ответ.
27 сен 2019 в 11:09
Setting properties on a source anchor for each of its dynamic states, using pseudo-classes:
Отслеживать
3,135 6 6 золотых знаков 18 18 серебряных знаков 34 34 бронзовых знака
ответ дан 9 мар 2017 в 13:58
9 1 1 бронзовый знак
приведенный сниппет — не работает. Ответ на английском. Кроме того, ссылка в ответе ооочень старая (2002 год). Вот новее и там ничего такого нет
Hover — эффекты при наведении
Мы задали цвет фона и текста, радиусы закругления, размер шрифта, отступы. Для анимации используем transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в течение 500 миллисекунд.
Горизонтальная заполнение
Полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.
Чтобы достичь такого результата, нужно использовать псевдо-элемент :before:
button:before
Данный контент абсолютно спозиционирован и расположен в верхнем левом углу кнопки. Зададим ширину равную 0px, потому что именно этот параметр мы будем анимировать. Чтобы анимировать его, мы просто изменим его ширину:
button:hover:before
Вертикальное заполнение
Если анимировать высоту, то заполнение произойдёт сверху.
button:before < content:''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: rgba(255,255,255,0.3); border-radius: 5px; transition: all 2s ease; >button:hover:before
Инвертирование цвета
Инвертируем цвет внутри кнопки и добавляем границу:
button:hover
Пунктирная граница
Добавим границу у кнопки и инвертируем цвета:
button < border: 3px solid #3a7999; >button:hover
Появление значка
При наведении значок плавно появиться слева от текста.
Подключим шрифт со значками Font Awesome.
Увеличим внутренний отступ, чтобы для значка было место, и добавим свойство overflow со значением hidden:
button
Далее добавляем значок из шрифта Font Awesome в псевдо-элемент before и размещаем его за пределами кнопки:
button:before
Осталось установить свойство left:
button:hover:before
Купи что-нибудь
Эффект подпрыгивания
Для данной анимации установим несколько ключевых кадров (keyframes):
@keyframes bounce < 0%, 20%, 60%, 100% < transform: translateY(0); transform: translateY(0); >40% < transform: translateY(-20px); transform: translateY(-20px); >80% < transform: translateY(-10px); transform: translateY(-10px); >>
Подключаем созданную анимацию:
button:hover
Искажение
В CSS3 появилась возможность использовать искажения:
button:hover
3D-поворот
Самый сложный эффект. Используем поворот кнопки для отображения другого сообщения, которое мы добавим в псевдо-элемент after у нашей кнопки.
Зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:
button
Установим правила для псевдо-элемента after:
button:after
Правила добавлены сверху, перед кнопкой, и выставлены такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, установлен нижний левый угол элемента и указано вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:
button:hover
Чтобы активировать данный эффект, переместим опорную точку трансформации в центр, а также повернём сам элемент, чтобы реализовать трансформацию.
Использование :hover
На примере ссылок использование :hover выглядит следующим образом.
a < color: green; >a:hover
Сперва мы определяем исходный стиль элемента, в частности, задаём цвет ссылок с помощью селектора A зелёным. Затем ниже пишем тот же селектор и через двоеточие без пробелов добавляем к нему :hover . После этого идут стилевые правила, которые должны проявляться при наведении курсора на элемент. В данном случае мы меняем цвет ссылки на красный.
:hover прекрасно сочетается не только с простыми селекторами элементов, но и с классами, а также работает в комбинациях селекторов, что позволяет на одной веб-странице делать группы ссылок разных видов. В примере 1 ссылки в добавлены без традиционного подчёркивания через свойство text-decoration со значением none . При наведении на эти ссылки добавляется подчёркивание с помощью значения underline . В ссылки при наведении просто меняют свой цвет.
Пример 1. Использование :hover для ссылок
Результат данного примера показан на рис. 1.
Рис. 1. Ссылки разных цветов
Надо учитывать, что в некоторых ситуациях :hover может не давать видимого результата, когда он неявно переопределяется. В приведённом стиле :hover не меняет цвет у посещённых ссылок, поскольку псевдокласс :visited располагается в коде ниже :hover .
a < color: green; >a:hover < color: red; >a:visited
Обращайте внимание, что положение в коде влияет на конечный результат. Достаточно поставить :hover ниже :visited и цвет посещённых ссылок при наведении будет меняться на красный.
a < color: green; >a:visited < color: purple; >a:hover
См. также
- :focus на мобильных устройствах
- text-decoration-skip-ink
- Анимация ссылок при наведении
- Атрибуты ссылок
- Виды ссылок
- Всплывающая подсказка
- Наследование в CSS
- Нормальное позиционирование
- Переходы с помощью :hover
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Создание ссылок
- Состояния кнопок
- Сочетание с псевдоклассами
- Ссылки
- Ссылки
- Ссылки в HTML
- Типы ссылок
- Якоря
Как изменить вид ссылки при наведении на нее курсора мыши?
Изменить цвет текстовой ссылки, когда на неё наводится курсор мыши и вернуть цвет обратно при уведении курсора.
Решение
Псевдокласс :hover , который добавляется к селектору A , определяет состояние ссылки при наведённом на неё курсоре мыши. В стилях вначале указывается селектор A , потом :hover (пример 1).
Пример 1. Изменение вида ссылки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвет ссылок Cras ingens iterabimus aequor — завтра снова мы выйдем в огромное море.
В данном примере ссылка становится подчёркнутой и меняет свой цвет, когда на неё наводится указатель (рис. 1). Заметьте, что псевдокласс :hover в коде идёт после :visited . Это имеет значение, иначе посещённые ссылки в данном случае не будут изменять свой цвет.
Рис. 1. Вид ссылки при наведении на неё курсора мыши
Аналогично можно изменить и цвет фона под ссылкой при её наведении, добавив свойство background к селектору A:hover , как показано в примере 2.
Пример 2. Изменение цвета фона ссылки
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фон под ссылками Audaces fortuna juvat - счастье покровительствует смелым.
Результат данного примера показан на рис. 2. Чтобы текст плотно не прилегал к фону, к селектору A добавлено свойство padding .
Рис. 2. Изменение цвета фона ссылки