Голосование

Оказалась ли данная статья полезной?

Да
5 (62.5%)
Нет
2 (25%)
Я ничего не понял
1 (12.5%)

Проголосовало пользователей: 8

0 Пользователей и 1 Гость просматривают эту тему.
  • 0 Ответов
  • 26798 Просмотров
*

poizon

  • Захожу иногда
  • 495
  • 187 / 1
  • Buu
:hover в IE6 [how to]
« : 04.11.2008, 14:41:26 »
Многие верстальщики сталкивались с необходимостью использования :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 и подключить его так
Код
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/hover.js"></script>
Так как данный скрипт не нужен никому, кроме тех посетителей, которые используют IE6 сделаем его подключение через условный комментарий
Код
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/hover.js"></script>
<![endif]-->
В css шаблона
Код
li:hover ul, /* для современных браузеров */
li.sfhover ul { /* для Internet Explorer 6 */
  display: block
}
Обратите внимание, что класс .sfhover - это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.

3) Ну и само собой использование jQuery
Сначала нам нужно скачать саму библиотеку jQuery, затем подключить ее в шаблон
Подключение библиотеки через условный комментарий аналогичен сути предыдушего метода
Код
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/jquery-1.2.6.min.js"></script>
<![endif]-->
После этого добавить инициализацию
Код
$('#Тут id элемента с указанием тега, требующего :hover (например, #block div)  ').hover(function() {
  $(this).addClass('hover');
}, function() {
  $(this).removeClass('hover');
});
В итоге получается
Код
<!--[if lte IE 6]>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/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

Надеюсь, что данная статейка окажется полезной для начинающих верстальщиков
« Последнее редактирование: 04.11.2008, 19:40:32 от poizon »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Hover-эффект для модуля BT Login

Автор zeus07

Ответов: 3
Просмотров: 2435
Последний ответ 05.08.2013, 01:20:16
от verstalshik