Эмуляция работы псевдокласса :hover в IE для всех элементов
Вот еще одна проблемма, которая может возникнуть при создании сайта, когда хочется сделать что-то красивое без JavaScript. Для того что бы реализовать различные эффекты при наведении мыши можно использовать такой CSS псевдокласс , как “:hover” (a:hover, div:hover, div.block:hover, image#logo:hover и т.д.). Проблемма для IE заключается в том, что он поддерживает :hover только для ссылки (a:hover). Данную проблемму можно обойти, но только при использовании JavaScript.
В результате мы получим эффекты, которые будут срабатывать при наведении мыши на html элемент во всех бразузерах. Данные эффекты будут работать даже при отключенных JavaScript в браузерах отличных от IE.
Итак, я предлагаю использовать скрипт, который будет добавлять еще один класс (”hover”) для текущего элемента при наведении курсора и, будет удалять его, когда курсор уйдет за пределы элемента. Короче говоря все будет базироватся на событиях onmouseover и onmouseout. А всю динамику мы будем прописывать в стилях.
Например:
#test_div {
width:100px;
height:100px;
background:red;
}
#test_div:hover, #test_div.hover {
width:110px;
height:110px;
background:blue;
}
Думаю тут понятно, что я сделал, кроме псевдокласса :hover, я еще добавил стиль с именем “hover”. И все эти стили будут применяться к элементу с id=”test_div”.
Далее, для изменения стиля элемента при наведении курсора есть у меня два решения.
Первый вариант.
JavaScript:
function CSSHover(obj, bOver) {
if ((navigator.userAgent.indexOf(’MSIE’)) < 0) return;
if(bOver) obj.className += ‘ hover’
else obj.className = obj.className.replace(’ hover’, ”)
}
В самом элементе нужно будет прописать следующее: onmouseover=”CSSHover(this,true)” onmouseout=”CSSHover(this,false)”
Данный вариант удобен в том случае, если вы не используете id тегов и если вы не генерируете html элементы с помощью скрипта.
Второй вариант.
Для его реализации необходимо добавить ID в теги.
Далее у нас будет такая функция JavaScript:
function AddCSSHover(sId) {
if ((navigator.userAgent.indexOf(’MSIE’)) < 0) return;
var obj = document.getElementById(sId);
obj.onmouseover = function() {eval(”this.className += ‘ hover’;”)}
obj.onmouseout = function() {eval(”this.className = this.className.replace(’ hover’, ”)”)}
}
Данная функция сама добавляет динамику к уже созданному тегу с конкретным ID. Вы должны помнить, что вызывать эту функцию нужно либо внизу страницы, либо после загрузки body (onload event).
Работает это приблизительно так:
<div id=”test_div”></div>
для этого div мы выполним следующий код: AddCSSHover(’test_div’)
Скачать пример Эмуляция работы псевдокласса :hover в IE для всех элементов