Псевдокласс :hover в атрибуте style (HTML)

Внедряем CSS в HTML. JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2082
Зарегистрирован: Сб авг 11, 2012 7:39 am
Поблагодарили: 68 раз

Псевдокласс :hover в атрибуте style (HTML)

Сообщение Slash » Вс авг 28, 2016 10:33 am

Появилась задача изменить стиль элемента при наведении курсора и вернуть прежний стиль, когда курсор увели. Для решения этой задачи существует псевдокласс :hover, при помощи, которого можно решить задачу, но дело в том, что стиль элемента находится в атрибуте style элемента, например:

Код: Выделить всё

<span style="color: #CCCCCC;">Текст</span> 
В него же необходимо вставить :hover, но делать этого конечно нельзя. Необходимо искать другой вариант решения, а вариантом вполне может быть - использование атрибутов событий: onMouseOver и onMouseOut:
  • onMouseOver - Выполняется, при наведении курсора.
  • onMouseOut - Выполняется, при выходи курсора за пределы элемента.
Делаем так:

Код: Выделить всё

<span style="color: #CCCCCC;" 
    onMouseOver="this.style.color = '#999999';"
    onMouseOut="this.style.color = '#CCCCCC';">
        Текст
</span>
Готово. Задача решена, теперь цвет текста меняется при наведении курсора и возвращается в прежний цвет, когда курсор убегает.

Реклама

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость