loading...

Авторизация ...

Имя пользователя :
Пароль :
я всё забыл!

В помощь вебмастеру » CSSCSS:hover для любого элемента в IE ниже 7-ки

Написал Fillosoff, 9 марта 2008 | 16 комментариев | рейтинг новости не нравится   +13   нравится Версия для печати
Клепал тут меню для сайта на CSS. но т.к. в нем применяется псевдо-класс :hover, то нарисовалась маленькая проблема. дело в том, что в IE6 и ниже :hover поддерживается только для ссылок, т.е. для , но совершенно не работают с любыми другими элементами. а мне для меню необходимо было, чтоб :hover работал с рисунками.
для себя я решил это нижеприведенным способом, может, кому пригодится также.

существует так называемый whatever:hover способ, который дает возможность применять селектор :hover в IE6 и ниже. последняя версия 1.00.031224. примеры работы можно посмотреть там же, по ссылке выше.

для того, чтобы заставить IE распознавать селектор :hover с любым элементом CSS, надо просто скачать .htc файл (whatever:hover), кинуть в папку с каскадными таблицами и подключить его вот таким вот образом через CSS файл:

body {
behavior:url("csshover.htc");
}


файл csshover.htc должен находится в одной директории с CSS файлом. если его кинуть в другую директорию, то нужно прописать правильный путь.

Впринципе, все готово.

P.S. при таком способе есть маленькая накладочка: во время проверки правильности написания кода, W3C CSS валидатор выдает ошибку, так как используется behavior, что не допускается правилами. кому важно, соответствие кода веб-стандартам, эту неприятность можно обойти следующим способом:

файл .htc для использования :hover предназначен только для IE. поэтому, его можно просто закомментировать спецкомментариями (conditional comments), благодаря которым, документ станет валидным. но в этом случае все должно находится не в CSS файле, а между самого HTML документа:

<!--[if IE]>
<style type="text/css">
BODY { behavior:url("structure/csshover.htc"); }
</style>
<![endif]-->


Удачи!



Комментарии пользователей

  Экспорт комментариев в RSS
 Сортировать по рейтингу, по дате

Написал nickon, 9 марта 2008 в 15:57 плохой комментарий   +1   хороший комментарий
Новостей: 230, комментариев: 476, Администраторы
Карма: 27±
Нужная весчь ... в хозяйстве сгодица

Написал noway, 9 марта 2008 в 16:06 плохой комментарий   +1   хороший комментарий
Новостей: 0, комментариев: 9, Пользователи
Карма:
спасибо!

Написал Emoboy, 9 марта 2008 в 16:09 плохой комментарий   +2   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
nickon,
+1

Написал Hamer, 9 марта 2008 в 16:16 плохой комментарий   0   хороший комментарий
Новостей: 42, комментариев: 2186, Изгнанные
Карма: 50±
когда-то давно искал такую штуку ))
Жаль что раньше не опубликовал wink

Написал Summer :), 9 марта 2008 в 16:25 плохой комментарий   0   хороший комментарий
Новостей: 1, комментариев: 36, Изгнанные
Карма: -2±
а можно по русски в двух словах объяснить зачем это, прочитал, но так и не понял что и как... ))

Написал grimweb, 9 марта 2008 в 16:50 плохой комментарий   0   хороший комментарий
Новостей: 6, комментариев: 446, Модератор
Карма: 23±
Summer :),
ну ты еще раз перечитай... книжку по css...

Написал Duck_Kun, 9 марта 2008 в 17:07 плохой комментарий   +1   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Помойму луший выход из этой ситуации.. скачать последний Internet Explorer.. можно убить несколько зайцев этим

Написал Fillosoff, 9 марта 2008 в 17:14 плохой комментарий   +1   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Summer :), :hover - это когда подводишь мышку к ссылке и она меняет свои свойства. или подчеркивание появляется, или цвет меняется, или еще чего. но в IE ниже 7-й версии, этот класс работает только для ссылок. а, например, для рисунков не работает. поэтому, если тебе надо, чтоб при подведении мышки, например, к рисунку появился или другой рисунок (в моем случае, в меню - чтоб появилось подменю), или описание рисунка, или еще чего, то в IE ниже 7-й версии надо будет сделать вышеописанный финт ушами.
вообще, это не единственный способ. можно использовать и спецскрипт для этого. но я сторонник как можно меньшего использования скриптов.

да, еще, у кого не сработает при таком раскладе:

body {
behavior:url("csshover.htc");
}


то, просто пропишите абсолютный путь для .htc:

body {
behavior:url(http://site.ru/templates/ваш шаблон/css/csshover.htc);
}


Цитата: Duck_Kun
Помойму луший выход из этой ситуации.. скачать последний Internet Explorer.. можно убить несколько зайцев этим


интересный выход. скачай IE7 и смотри все свои эффекты сам.
а если тебе важно, что видят посетители твоего сайта, то зайди хотя бы в лирушную статистику и посмотри статистику посещения сайтов браузерами. не знаю, как у кого, а у меня 75% посещения сайтов идет браузером IE6. читать им нотации по поводу их устаревшего кривого браузера у меня желания нет, да и бессмыссленно это. многие заходят с работы, где бал правят сисадмины. а в некоторых организациях до сих пор под WIN 98-м сидят.

Написал MONAH, 9 марта 2008 в 18:09 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
Fillosoff,
интересный выход. скачай IE7 и смотри все свои эффекты сам.
а если тебе важно, что видят посетители твоего сайта, то зайди хотя бы в лирушную статистику и посмотри статистику посещения сайтов браузерами. не знаю, как у кого, а у меня 75% посещения сайтов идет браузером IE6. читать им нотации по поводу их устаревшего кривого браузера у меня желания нет, да и бессмыссленно это. многие заходят с работы, где бал правят сисадмины. а в некоторых организациях до сих пор под WIN 98-м сидят.

Уважуха тебе брат, всё сказано верно, даж прикопаться некчему ! friends

Написал fl.atom, 9 марта 2008 в 19:14 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
спс...добавлю в свою коллекцию bv

Написал FaN†oM®, 9 марта 2008 в 21:38 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
админ сказал нужная весчь значит нужная!будем юзать!=)

Написал PoMaH, 9 марта 2008 в 22:16 плохой комментарий   0   хороший комментарий
Новостей: 2, комментариев: 215, Пользователи
Карма:
eto budit tormozit staryi IE
proshe pravelno delat ssylki cerez nuzdyje extentions

Написал CSR, 28 апреля 2008 в 12:10 плохой комментарий   0   хороший комментарий
Новостей: 40, комментариев: 310, Пользователи
Карма:
грузит он слишком браузер... не лечге заюзать

onmouseover="this.className='classHo
ver'" onmouseout="this.className='class&
#039;"


?

Написал webmaker, 17 июня 2008 в 21:50 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
давно искал альтернативу Джава-скриптс, ненавижу её! Подскажите что лучше использовать в этом случае скрипт или css?

Написал lich-king-best, 17 декабря 2009 в 19:40 плохой комментарий   0   хороший комментарий
Новостей: 0, комментариев: 0, Гости
Карма: ±
lol IE вообще только для того что бы скачать Mozila

Написал Mexalim, 21 июня 2010 в 16:55 плохой комментарий   0   хороший комментарий
Новостей: 28, комментариев: 247, Пользователи
Карма:
ag +1

Информация



Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
Анализ Тиц и PR сайта

[removed][removed] [removed] (adsbygoogle = window.adsbygoogle || []).push({}); [removed]