Использование псевдокласса hover в IE6

Ответить
Аватара пользователя
Distructor
Администратор
Сообщения: 1606
Зарегистрирован: 28.12.2009
Многие верстальщики сталкивались с необходимостью использования :hover в своих шаблонах. Практически всегда данный псевдокласс используется для ссылок (тег a), для которых :hover работает всегда и везде, но бывают ситуации, когда встает задача сделать подсветку для других элементов, например для div или td, и вот здесь появляется "подводный камень", известный нам как IE6. С данным браузером всегда было достаточно много проблем, но все они само собой имеют пути решения. В данном топике я приведу 3 способа реализации :hover для IE6

1) hover.htc
  • Код: Выделить всё

    <attach for=element event=onmouseover handler=topm>
    <attach for=element event=onmouseout handler=verm>
    <script>
        function topm(){element.className='hover';}
        function verm(){element.className='';}
    </script>
    Как пользоваться скриптом
    Для начала его необходимо подключить к файлу стилей, например, так (если нужно предусмотреть возможность его применения к любому html-элементу):
    * {behavior:url("hover.htc")}
    Либо, вот так (если хотим его применить только к конкретному элементу):
    li {behavior:url("hover.htc")}
    А непосредственно реализация ховер-эффекта делается следующим образом. Например, если это меню с выпадающим списком:

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

    li:hover ul, /* для современных браузеров */
    li.hover ul { /* для Internet Explorer 6 */
      display: block
    }
    Обратите внимание, что класс .hover - это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.
2) SuckerFish hover
  • Код: Выделить всё

    sfHover = function() {
    	var sfEls = document.getElementById("Id родительского элемента").getElementsByTagName("Имя тега для :hover");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    Как пользоваться скриптом
    Сначала нам нужно подключить его в шаблон либо просто вставив в <head></head> его целиком

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

    <script type="text/javascript">
    sfHover = function() {
    	var sfEls = document.getElementById("Id родительского элемента").getElementsByTagName("Имя тега для :hover");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() { this.className+=" sfhover"; }
    		sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); }
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    или же создать, допустим, файл hover.js и так как данный скрипт не нужен никому, кроме тех посетителей, которые используют IE6 сделаем его подключение через условный комментарий

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

    <!--[if lte IE 6]>
    <script type="text/javascript" src="/templates/js/hover.js"></script>
    <![endif]-->
    В css шаблона

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

    li:hover ul, /* для современных браузеров */
    li.sfhover ul { /* для Internet Explorer 6 */
      display: block
    }
    Обратите внимание, что класс .sfhover - это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.
3) Ну и само собой использование jQuery
  • Сначала нам нужно скачать саму библиотеку jQuery, затем подключить ее в шаблон
    Подключаем библиотеку через условный комментарий (аналогичен сути предыдушего метода) и выполняем инициализацию (вместо "block div" указывается id нужного элемента).

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

    <!--[if lte IE 6]>
    <script type="text/javascript" src="/templates/js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript">
        $('#block div').hover(
             function() { $(this).addClass('hover'); }, 
             function() { $(this).removeClass('hover'); }
         );
    </script>
    <![endif]-->
    
    В css шаблона

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

    #block:hover div, /* для современных браузеров */
    #block.hover div { /* для Internet Explorer 6 */
      display: block
    }
Подводя итоги о работе данных способов можно сказать, что использование способа 3 не рационально без использования jquery на сайте вообще, так как подгружать ~55кб библиотеки jquery ради реализации работы :hover в IE6 не имеет смысла, когда есть два других значительно сжатых способа. Способ 1 - самый минимальный в плане кода, а способ номер 2 имеет наивысшую совместимость со старыми версиями IE Начиная от 5.0, так же он валиден в плане css, так как не требует использования behavior

Надеюсь, что данная статейка окажется полезной для начинающих верстальщиков

источник http://joomlaforum.ru/index.php?topic=46060.0

Ответить