Как добавить встроенные стили CSS при наведении курсора
html
3 месяца назад
Надя Бано
« :hover » является псевдоселектором, что означает, что он распознается только в таблице стилей CSS. Пользователям не разрешено применять встроенные стили CSS при наведении. Однако, чтобы добавить встроенный CSS при наведении, лучше дать элементу имя класса или идентификатор, а затем использовать его в таблице стилей для применения стилей или использования функций JavaScript.
В этой статье вы узнаете, как добавлять стили CSS при наведении курсора с помощью JavaScript.
Как добавить стили CSS при наведении?
Нет методов для использования наведения во встроенном CSS. Однако, чтобы применить эффект наведения к элементу, используя его идентификатор, ознакомьтесь с данным примером.
Пример
В HTML добавьте элемент div с именем класса « main-content ». Внутри этого div добавьте элемент «», чтобы указать заголовок. После этого добавьте элемент «» с некоторым содержимым, которое указано с атрибутами:
Атрибут « href » определяет ссылку.
Атрибут « id » установлен, чтобы сделать его доступным для CSS.
Также укажите в нем функции « mouse_over()
» и « mouse_out() ». При наведении мыши эти функции будут запускаться и вызывать функцию в JavaScript:
"Функция mouse_out() " использует метод " document. getElementById("hov").style.color = "white" ", чтобы получить идентификатор " hov " из "" элемент в качестве параметра, у которого цвет стиля должен быть изменен на белый.
«
» — закрывающий тег.
Здесь вы можете видеть, что при наведении цвет текста меняется на желтый, а при удалении цвет текста становится белым:
Так можно применять стили CSS при наведении.
Заключение
« :hover » — это псевдоселектор, который распознается только в CSS. Не существует методов добавления встроенных стилей CSS при наведении. Таким образом, лучше использовать функции JavaScript для указания свойств при наведении курсора мыши на элемент. В этом посте продемонстрирован метод добавления стилей CSS при наведении.
Об авторе
Надя Бано
Я увлеченный и дальновидный инженер-программист, стремящийся исследовать глобальную индустрию программного обеспечения.
Я люблю писать статьи о продвинутом дизайне, программировании и тестировании.
Посмотреть все сообщения
Простой способ создания эффектов наведения CSS
Содержание
1. Определение селектора CSS :hover
2. Синтаксис :hover в CSS
3. CSS :hover и другие псевдоклассы
4. Еще сложный пример :hover
5. Поддержка браузера
Селектор CSS :hover определен
Селектор :hover в CSS на самом деле является псевдоклассом. Используя :hover , вы можете определить стиль конкретного элемента, когда пользователь наводит курсор на него, фактически не нажимая на него:
Пример
h2:hover {
цвет фона: синий;
}
Попробуйте вживую. Учитесь на Udacity
Синтаксис :hover в CSS
Требования к синтаксису селектора :hover следующие:
selector:hover {style} 9 0003
Селектор можно определить тремя способами:
с помощью имя элемента
с использованием ID элемента
с использованием определенного класса
Пример
p:hover, h2:hover, a:hover {
цвет фона: желтый;
}
Попробуйте Live Learn на Udacity
Pros
Упрощенный дизайн (без лишней информации)
Высококачественные курсы (даже бесплатные)
Разнообразие функций
Основные характеристики
Нанодипломные программы
Подходит для предприятий
Платные сертификаты об окончании
ЭКСКЛЮЗИВ: СКИДКА 75%
Плюсы
Простая навигация
Никаких технических проблем
Кажется заботиться о своих пользователях
Основные характеристики
Большое разнообразие курсов
30-дневная политика возврата
Бесплатные сертификаты об окончании
ОТ 12,99$
Pros
Отличный пользовательский интерфейс
Предлагает качественный контент
Очень прозрачно с ценами
9 0045
Основные характеристики
Бесплатные сертификаты об окончании
Ориентирован на навыки работы с данными
Гибкий график обучения
75% СКИДКА
CSS :hover и другие псевдоклассы
Довольно часто для оформления ссылок в CSS используются эффекты наведения:
Пример
a. link1:hover,
a.link1: активный {
цвет: зеленый;
}
a.link2: наведите курсор,
a.link2: активный {
размер шрифта: 120%;
}
Попробуйте живое обучение на Udacity
Для этого вы можете использовать :hover с другими псевдоклассами. Селектор :link предназначен для непосещенных ссылок, :visited используется для посещенных страниц и :active используется для активной в данный момент ссылки.
Чтобы правильно оформить ссылки, вы должны помнить, что псевдоклассы :link , :visited , :hover и :active должны использоваться именно в таком порядке : 9000 3
Вы также можете добавить ссылку на , которая будет отображаться только , когда пользователь наводит курсор на выбранный элемент:
Пример
a {
дисплей: нет;
}
span:hover + a { /* Ссылка отображается только тогда, когда вы наводите курсор на элемент span */
дисплей: блок;
}
Попробуйте вживую Учитесь на Udacity
Более сложный пример :hover
Чтобы лучше понять, что такое CSS hover 9Доступно 0240 эффектов, см.
немного более сложный пример ниже. При наведении курсора на элемент появится раскрывающееся меню . Затем, когда вы наведете курсор на его параметры, они будут выделены :
Пример
div {background-color: blue;}
дел а {
текстовое оформление: нет;
белый цвет;
размер шрифта: 20px;
отступ: 15 пикселей;
отображение: встроенный блок;
}
ул {
дисплей: встроенный;
}
уль ли {
отображение: встроенный блок;
}
уль ли:наведите {
фон: синий;
}
ул ли: наведите ул {
дисплей: блок;
}
уль ли уль {
положение: абсолютное;
ширина: 150 пикселей;
дисплей: нет;
}
уль ли уль ли {
дисплей: блок;
фон: синий;
}
уль ли уль ли а {
отображение: блок !важно;
}
уль ли уль ли: наведите курсор {
фон: голубой;
}
Попробуйте вживую. Учитесь на Udacity
Примечание. использование селектора CSS :hover может вызвать проблемы у пользователей сенсорных экранов, поскольку прикосновение к элементу обычно интерпретируется как щелчок.
После этого добавьте элемент «» с некоторым содержимым, которое указано с атрибутами:
getElementById("hov").style.color = "white" ", чтобы получить идентификатор " hov " из " 
link1:hover,
a.link1: активный {
цвет: зеленый;
}
a.link2: наведите курсор,
a.link2: активный {
размер шрифта: 120%;
} 
