Круговые эффекты наведения используя CSS Transitions #
ДЕМО / СКАЧАТЬ
ДЕМО / СКАЧАТЬ
Эффекты наведения на CSS3 и jQuery #
ДЕМО / Скачать
Эффекты с картинками #
hover и IE6 #
Многие верстальщики сталкивались с необходимостью использования :hover в своих шаблонах. Практически всегда данный псевдокласс используется для ссылок (тег a), для которых :hover работает всегда и везде, но бывают ситуации, когда встает задача сделать подсветку для других элементов, например для div или td, и вот здесь появляется «подводный камень», известный нам как IE6. С данным браузером всегда было достаточно много проблем, но все они само собой имеют пути решения. В данном топике я приведу 3 способа реализации :hover для IE6
1) hover.htc
Как пользоваться скриптом
Для начала его необходимо подключить к файлу стилей, например, так (если нужно предусмотреть возможность его применения к любому html-элементу):
Либо, вот так (если хотим его применить только к конкретному элементу):
А непосредственно реализация ховер-эффекта делается следующим образом. Например, если это меню с выпадающим списком:
Обратите внимание, что класс .hover — это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.
2) SuckerFish hover
Как пользоваться скриптом
Сначала нам нужно подключить его в шаблон либо просто вставив в его целиком
или же создать, допустим, файл hover.js и подключить его так
Так как данный скрипт не нужен никому, кроме тех посетителей, которые используют IE6 сделаем его подключение через условный комментарий
В css шаблона
Обратите внимание, что класс .sfhover — это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.
3) Ну и само собой использование jQuery
Сначала нам нужно скачать саму библиотеку jQuery, затем подключить ее в шаблон
Подключение библиотеки через условный комментарий аналогичен сути предыдушего метода
После этого добавить инициализацию
В итоге получается
В css шаблона
Подводя итоги о работе данных способов можно сказать, что использование способа 3) не рационально без использования jquery на сайте вообще, так как подгружать ~55кб библиотеки jquery ради реализации работы :hover в IE6 не имеет смысла, когда есть два других значительно сжатых способа.
Способ 1) Самый минимальный в плане кода, а способ номер 2) имеет наивысшую совместимость со старыми версиями IE Начиная от 5.0, так же он валиден в плане css, так не требует использования behavior
1) hover.htc
Как пользоваться скриптом
Для начала его необходимо подключить к файлу стилей, например, так (если нужно предусмотреть возможность его применения к любому html-элементу):
* {behavior:url("hover.htc")}
Либо, вот так (если хотим его применить только к конкретному элементу):
li {behavior:url("hover.htc")}
А непосредственно реализация ховер-эффекта делается следующим образом. Например, если это меню с выпадающим списком:
li:hover ul, /* для современных браузеров */
li.hover ul { /* для Internet Explorer 6 */
display: block
}
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
var sfEls = document.getElementById("Id родительского элемента").getElementsByTagName("Имя тега для :hover");
for (var i=0; i
Как пользоваться скриптом
Сначала нам нужно подключить его в шаблон либо просто вставив в его целиком
или же создать, допустим, файл hover.js и подключить его так
Так как данный скрипт не нужен никому, кроме тех посетителей, которые используют IE6 сделаем его подключение через условный комментарий
В css шаблона
li:hover ul, /* для современных браузеров */
li.sfhover ul { /* для Internet Explorer 6 */
display: block
}
li.sfhover ul { /* для Internet Explorer 6 */
display: block
}
Обратите внимание, что класс .sfhover — это то, что прописано в самом скрипте. По желанию, название этого класса можно заменить.
3) Ну и само собой использование jQuery
Сначала нам нужно скачать саму библиотеку jQuery, затем подключить ее в шаблон
Подключение библиотеки через условный комментарий аналогичен сути предыдушего метода
После этого добавить инициализацию
$('#Тут id элемента с указанием тега, требующего :hover (например, #block div) ').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
В итоге получается
В css шаблона
#block:hover div, /* для современных браузеров */
#block.hover div { /* для Internet Explorer 6 */
display: block
}
#block.hover div { /* для Internet Explorer 6 */
display: block
}
Подводя итоги о работе данных способов можно сказать, что использование способа 3) не рационально без использования jquery на сайте вообще, так как подгружать ~55кб библиотеки jquery ради реализации работы :hover в IE6 не имеет смысла, когда есть два других значительно сжатых способа.
Способ 1) Самый минимальный в плане кода, а способ номер 2) имеет наивысшую совместимость со старыми версиями IE Начиная от 5.0, так же он валиден в плане css, так не требует использования behavior