Если не работает img:hover в Internet Explorer

[DARX]

Всем известно, что IE не обрабатывает селектор :hover у всех элементов, кроме a (ссылки). Бывают случаи, когда без этого селектора ну никак нельзя - то есть нужно, чтобы при наведении на картинку применялся какой-либо стиль к ней. Как это можно сделать? Очень просто!

Задача
Сделать так, чтобы во всех браузерах при наведении курсора мыши на картинку менялся цвет ее рамки.

Решение
Что нам понадобится:
1. Файл стилей style.css

Код: [Выделить]

img{
   border: 1px solid #000; /* Черная рамка толщиной в 1 пиксель */
   padding: 1px; /* Отступ от изображения до рамки */
};

img.bordered {
   border: 1px solid red; /* Красная рамка толщиной в 1 пиксель */
};

2. Сама картинка:

Код: [Выделить]

<img src="someimage.jpg" />
3. Код Javascript:

Код: [Выделить]

$("img").hover(function(){
$(this).addClass('bordered'); // Добавляем класс
},
function (){
$(this).removeClass('bordered'); // Убираем класс
});

Вот и все. Как видно - ничего сложного нет.
Ссылки по теме:
 - jQuery офф.сайт - http://www.jquery.com
 - Скачать jQuery - http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js
 - Документация - http://docs.jquery.com/

[Rex]

Ммм.. Очень интересно.. Сама суть.. Нужно взять твою пилу и поработать с jQuery.. Как с остальными:))

[biohazard]

Я в такой ситуации обычно оборачиваю img в a, и уже работаю со ссылкой.

[Rex]

Я в такой ситуации обычно оборачиваю img в a, и уже работаю со ссылкой.

Мне думается что jQuery примерно так и поступает=) Нужно будет в ней порыться, для обшего развития:))

[biohazard]

а onmouseover разве не работает?

[Rex]

работает.

[zema]

есть фикс для ие

в html
<!--[if IE 6]><link href="ie.css" rel="stylesheet" type="text/css"><![endif]-->
-----
в цсс
body {behavior:url("csshover.htc");}
-----
вот сам js http://files.north.kz/f/5254/csshover.htc

UPD: намного лучше, меньше кода, а значит быстрее страница загрузится, работает на всех тегах

[biohazard]

Не понимаю, к чем весь этот онанизм?
onmouseover вроде работает для всех блочных элементов...

[DARX]

Я в такой ситуации обычно оборачиваю img в a, и уже работаю со ссылкой.

Согласен, с ним проще. Но в моем случае (особенности верстки) hover для ссылок не было решением проблемы.

а onmouseover разве не работает?

Событие прекрасно работает во всех браузерах для всех блочных элементов. В пользу jquery сыграли четыре фактора:
1. Использование во всем проекте. Не хотелось бы отделять "голый" js и jQuery по функциональности.
2. Unobtrusive Javascript. Меня давно не рвет дописывать в верстке "onmouseover='...' onmouseout=''"
3. Как следствие - большой объекм генерируемого кода, так как картинок в среднем 40 на странице.
4. Изящность и простота кода

есть фикс для ие

Согласен, что при отключенном js мое решение работать не будет, а Ваше - будет
Но все равно, использование подобных "костылей", имхо, не есть гут.