В залеза на своето съществуване, Internet Explorer 6 (IE6) все още държи позиции и гордо върви редом до едни от най-популярните браузъри в момента. Краят му не е дошъл още и вероятно това ще стане с излизането на IE9 и следващия Windows. Дотогава обаче, колкото и да го мразим, трябва малко или много да се съобразяваме с него. Това ще бъде един от малкото уроци, посветени изцяло на проблем под IE6, така че може би хората, които зависят от този браузър ще наострят уши.
Всички знаете, че IE6 поддържа псевдо-класа :hover само на <a> елемент, което в доста от случаите е проблем, защото орязва не само визията, но понякога и ползваемостта. Точно за това нашата задача е да намерим най-простото решение.
Първият метод, който е най-близо до истината е така нареченият Whatever:hover. Идеята там е да се възползвате от behaviors, които се използват за добавяне на допълнителни функционалности на даден елемент. Проблемите тук обаче са няколко - първо скриптът, който се позлва изобщо не е малък и нормален потребител трудно би разбрал какво изобщо се случва и как работи това, въпреки коментарите. Аз лично не обичам да използвам неща, които не разбирам и над които нямам контрол и точно поради тази причина не го препоръчвам. Освен това е имало случаи въпросния behavior да не сработи по необясними причини (предполагаем проблем - браузър настройки).
Вторият метод е Suckerfish :hover, който ползва сравнително кратък скрипт, написан на чист JavaScript. Неговата идея е при hover да сложи class на елемента, който посочите и този клас да има същите CSS свойства, като стандартния hover. Този метод работи безотказно, но поне на мен не е необходим, защото обикновено ползвам jQuery и тогава малко му се губи смисъла. Големият плюс е, че ако ви трябва да постигнете само този ефект, то не е нужно да зареждате каквито и да е JS frameworks.
Последният метод, който ще разгледаме и върху който ще се концентрираме е с използването на jQuery. Всъщност логиката тук е същата, като на предния пример - изберете си елемент и при ховър му добавете class, който при hover out изчезва.
| View DemoDownload |
Както виждате за демото съм приготвил класическия случай с таблица и tr-а, които при ховър сменят цвета си с цел да бъдат по-видими. Освен това с чист CSS съм маркирал някои tr-a по-тъмни, за да се получи зебра ефект. Ето и съкратен вариант на html-a, за да си представите по-добре.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Пълна :hover поддръжка в Internet Explorer 6</title> <link rel="stylesheet" href="css/style.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/ie6hover.js"></script> </head> <body> <div id="cars"> <table cellspacing="0" cellpadding="0"> <tr class="dark"> <td><a href="#">Acura</a></td> <td><a href="#">Daihatsu</a></td> <td><a href="#">Jeep</a></td> <td><a href="#">MG</a></td> <td><a href="#">Seat</a></td> </tr> <tr> <td><a href="#">Alfa Romeo</a></td> <td><a href="#">Datsun</a></td> <td><a href="#">Kia</a></td> <td><a href="#">Mini</a></td> <td><a href="#">Skoda</a></td> </tr> </table> </div> </body> </html>
Идва ред на краткото скриптче, което взима нашите tr-та и казва, че при hover трябва да им се сложи клас и съответно при hover out да се махне.
jQuery
$(document).ready(function() {
$('tr').hover(
function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}
);
});
В CSS-a е необходимо само и единствено да добавим на новия клас същия стил, като на стандартния hover. Съответно може да разкараме стандартния hover, но тогава рискуваме да нямаме hover на нито един браузър, в случай че потребителят е изключил JavaScript-a.
CSS
#cars table tr:hover, #cars table tr.hover {
background: #dadada;
}
Надявам се да сте си избрали поне един от трите най-популярни метода. Честно казано всеки си има приложение, плюсове и минуси и точно за това реших да кажа няколко думи и за трите.
Бих сложил едно допълнително условие в js кода, така че да бъде активен само при IE.
if (jQuery.browser.msie && jQuery.browser.version < 7)
Така ще се разчитате на браузъра да изпълнява hover-a, а не на jQuery и дори при спрян JS (което си е рядкост) ще работи под другите браузъри.