CSS:Hover в IE6

misho

Registered
Следвах примера от Fridaycode, за да си задействам hover ефекта и в IE6, но удрям на камък. :lol:
Имам следния код:
HTML:
<script src="jquery-1.5.1.js"></script>

...
<div class="menu">
 ...
</div>
[css].menu {
margin: 10px -10px 10px -10px;
padding: 5px 10px 10px 10px;
color: #232323;
background-image: url(trans_12.png);
}
.menu:hover, .menu.hover {
background-image: url(trans_20.png);
}[/css]

ie6hover.js
[js]$(document).ready(function() {
$('.menu').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});[/js]
А в примера кода си работи. :shock: Някакви идеи къде бъркам? Това .menu.hover малко ме притеснява. :?
 
[js]$(document).ready(function() {
$('tr').hover(
function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}
);
});[/js]

[css]body {
margin: 0;
padding: 0;
font-size: 11px;
font-family: Tahoma, Arial, Verdana, sans-serif;
line-height: 1.3em;
background: #eee;
color: #666;
}

a, a:link, a:visited { outline: none; text-decoration: none; }
.clr { clear: both; height: 0; line-height: 0; font-size: 0; }

#cars {
width: 800px;
margin: 100px auto;
border: 1px solid #C8C8C8;
border-bottom: none;
}

#cars table {
width: 100%;
}

#cars table tr.dark {
background: #e5e5e5;
}

#cars table tr:hover, #cars table tr.hover {
background: #dadada;
}

#cars table tr td {
border-bottom: 1px solid #bebebe;
border-top: 1px solid #fcfcfc;
width: 20%;
padding: 6px 10px;
color: #999;
}

#cars table tr td a {
color: #666;
font-size: 12px;
}

#cars table tr td a:hover {
color: #923D51;
text-decoration: underline;
}[/css]

Взех го от сорса...
 
StormBreaker каза:
IE6 не поддържа селектиране по 2 класа на 1 елемент. .menu.hover това не го разбира
Вместо .menu сложих #soft, но IE6 пак ме бойкотира. :?

Тоя IE6...хиляда js файла наблъсках заради неговите кусури. :x

tedo96, и аз го гледах това, ама нещо не сработи като се опитах да го нагодя за моя случай.
 
misho каза:
StormBreaker каза:
IE6 не поддържа селектиране по 2 класа на 1 елемент. .menu.hover това не го разбира
Вместо .menu сложих #soft, но IE6 пак ме бойкотира. :?

Тоя IE6...хиляда js файла наблъсках заради неговите кусури. :x

Сложи един горен елемент (с id menu) и селектирай така: #menu .hover, #menu .menu:hover
 
StormBreaker каза:
Сложи един горен елемент (с id menu) и селектирай така: #menu .hover, #menu .menu:hover
И така: прилагам стила на .menu, а стила за hover на #menu .hover, #menu .menu:hover. И все така без резултат.


tedo96 каза:
Защо се интересуваш от него? На 10 годинки е вече... :shock:
Защото, за съжаление, почти 10% от посетителите на сайта ми са с него.
 
misho каза:
StormBreaker каза:
Сложи един горен елемент (с id menu) и селектирай така: #menu .hover, #menu .menu:hover
И така: прилагам стила на .menu, а стила за hover на #menu .hover, #menu .menu:hover. И все така без резултат.


tedo96 каза:
Защо се интересуваш от него? На 10 годинки е вече... :shock:
Защото, за съжаление, почти 10% от посетителите на сайта ми са с него.

Може ли линкче да погледна с огнебуболечката?
 
Кода от JS файла го направи така и трябва да работи:
$(document).ready(function() {
$('.menu').hover(
function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
}
);
});

Така хваща ховъра на .menu, не #menu
 
Проработи. :D
Но как ще стане с PNG картинките (които странно защо работят и без фикса в момента:shock: )?

Промяна: Е, не работи, разбира се. :D
 
Проблема с този фикс е, че прави нов елемент и го слага върху стария. Така ховър на стария реално не може да се види, защото е скрит.

Може да wrapнеш .menu в някакъв друг елемент, който е само контейнер и вътре в него да е елемента с фона. Така ховъра го слагаш на контейнера за .menu, който няма да го смени фикса
 

Back
Горе