Дата публикации: 19.03.2010
Задача
Научить IE6 изменять стили элемента при наведении мыши.
Теория
Для того, чтобы задать оформление при наведении мыши используется псевдокласс hover.
Собственно, на первый взгляд, задача решается элементарно:
a{
color:#0f0;
}
a:hover{
color:#f00;
}
Такой код сработает для любого из популярных браузеров. Ссылка при наведении поменяет цвет.
Но, как говорится, есть нюансы.
Попробуй применить этот прием не к ссылке, а к любому другому элементу. Например, на страничке есть span, нажатие на который по задумке дизайнера вызывает какое-либо действие (подробнее об этом можно почитать в статье «Не все то ссылки, что подчеркнуто»).
Тут нас ждет сюрприз! Один Отмирающий Браузер опять все испортит. Оказывается IE6 понимает hover только для тега a!
Решение
Стоит немного поискать, и можно найти ряд решений этой проблемы с помощью скриптов. Общая идея приемов как правило одинакова. Для элементов, у которых хочу реализовать hover, перехватываю событие наведения мыши и присваиваю какой-нибудь специальный класс. Соответственно при уходе мыши с элемента — класс убираю. Тем не менее подключать внешние скрипты для этой задачи кажется не совсем рациональным.
Наиболее красивым было бы в CSS использовать expression, причем описать его в отдельном файле, который подключается только для IE6 условными комментариями. Умрет IE6 — убрали файл и дело с концом!
Давайте, например, подчеркнем span, при наведении. Итак, для всех адекватных браузеров пишем:
span:hover{
text-decoration:underline
}
Для заслуженного ветерана по борьбе с реализацией стандартов:
span{
behavior: expression(
onmouseover = function() {this.className += ' hover'},
onmouseout = function() {this.className = this.className.replace('hover', '')},
style.behavior = null
);
}
span.hover{
text-decoration:underline
}
Оптимизированный expression сработает только один раз — при загрузке страницы он «раздаст» всем спанам внутренние события onmouseover и onmouseout.
Демо пример. Проверено в:
- IE 6-8
- Firefox 2-3.5
- Opera 9.5-10
- Safari 3