Как написать 'a:hover' в инлайн CSS?
У меня есть ситуация, в которой мне нужно написать инлайн CSS, и я хочу применить стиль при наведении на якорь (ссылку).
Как я могу использовать a:hover в инлайн CSS внутри атрибута стиля HTML?
Например, использование CSS классов в HTML-рассылках не всегда возможно и надежно.
5 ответ(ов)
Хотя кажется невозможным определить правило :hover в стиле inline, вы можете задать значение стилей в inline, используя CSS переменную:
:hover {
color: var(--hover-color);
}
<a style="--hover-color: green">
Библиотека
</a>
Рекомендуется использовать атрибут или класс в дополнение к селектору (например, [hover-color]:hover), чтобы обеспечить совместное существование с другими правилами изменения цвета при наведении с низкой специфичностью (например, из CSS reset или некоторых элементов, использующих стандартный стиль).
Да, если вам действительно нужен встроенный код, это можно сделать. Я использовал этот метод для некоторых кнопок с наведением. Вот пример:
.hover-item {
background-color: #FFF;
}
.hover-item:hover {
background-color: inherit;
}
<a style="background-color: red;">
<div class="hover-item">
Контент
</div>
</a>
В данном случае встроенный стиль: "background-color: red;" будет цветом переключения при наведении. Просто замените цвет на нужный вам, и это решение будет работать. Понимаю, что это может не быть идеальным решением с точки зрения совместимости, но если это абсолютно необходимо, то оно работает.
Чтобы задать стили с помощью JavaScript, вы можете использовать несколько подходов. Вот два способа, как добавить стили к элементу с идентификатором mydiv:
a) Добавление инлайн-стиля
Вы можете динамически внедрить CSS-правило в <head> вашего документа:
document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');
Этот способ добавляет правило, которое изменяет цвет текста на красный при наведении мыши на элемент mydiv.
b) Немного более сложный метод - добавление обработчиков событий "mouseover" и "mouseleave"
Другой вариант — использовать JavaScript для изменения класса элемента при наведении мыши:
document.getElementById("mydiv").onmouseover = function(e) {
this.className += ' my-special-class';
};
document.getElementById("mydiv").onmouseleave = function(e) {
this.className = this.className.replace('my-special-class', '');
};
В этом случае при наведении на элемент mydiv к его классу добавляется класс my-special-class, а при уходе мыши он снова удаляется.
Примечание
При работе с многословными стилями, такими как font-size, в JavaScript они записываются без дефисов и с использованием верхнего регистра для следующего слова:
element.style.fontSize = "12px";
Так что вы можете использовать этот синтаксис для изменения других свойств стиля элемента.
Как уже упоминалось, вы не можете задать произвольные встроенные стили для состояния наведения (hover), но вы можете изменить стиль курсора при наведении с помощью CSS, добавив следующее в соответствующий тег:
style="cursor: pointer;"
Вы можете сделать это, но не с помощью встроенных стилей. Вы можете использовать события onmouseover и onmouseout. Вот пример:
<div style="background: #333; padding: 10px; cursor: pointer"
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
Наведите курсор на меня!
</div>
Когда вы наведете курсор, фон элемента изменится на более светлый оттенок, а когда уберете курсор, он вернется к исходному цвету.
Получить координаты (X,Y) HTML-элемента
"Как сделать div на 100% высоты окна браузера"
Как создать ненумерованный список без маркеров?
Стилизация кнопки input type="file"
Изменение цвета элемента hr