Как решить :hover в IE?

[lenmikh]

Как реализовать чтобы работало в IE? Пробую с помощью hover.htc, получается поменять только цвет текстовой ссылки при наведении, а вот картинка рядом не меняется. Код ниже:

<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-spacere;overflow:auto'><div id="left">
<div class="leftmenu">
<ul class="links_leftmenu">
<li class="leftmenu-link_1">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li class="leftmenu-link_2">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li class="leftmenu-link_3">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li class="leftmenu-link_4">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li class="leftmenu-link_5">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li class="leftmenu-link_6">[Только зарегистрированные пользователи могут видеть ссылки. ][/list]
</div>
</div>


.leftmenu-link_2{
background: url(../images/2_green.jpg) no-repeat 0 0;
display:inline;
}
.leftmenu-link_2:hover{
background: url(../images/2_red.jpg) no-repeat 0 0;
color:#d01414;
font-weight:bold;
text-decoration: none;
}</div>

И еще при наведении мыши на ссылку эта самая фоновая картинка дублируется и получается наложение, хотя стоит no-repeat (см. картинку)

[Aykroyd]

получается поменять только цвет текстовой ссылки при наведении, а вот картинка рядом не меняется

Это скорее всего из-за того, что у пунктов списка отсутствует hasLayout. Или display:inline для LI можно попробовать убрать.

при наведении мыши на ссылку эта самая фоновая картинка дублируется и получается наложение

Это вполне логично, поскольку класс leftmenu-link_2 у вас назначен как для элемента LI, так и для элемента A.

[lenmikh]

Спасибо, inline убран, LI исправлен:
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-spacere;overflow:auto'>#left{
background-color: #03F;
width: 207px;
height: 100%;
float: left;
position: relative;
padding-top: 15px;
}
.links_leftmenu {
padding-left: 50px;
}
.links_leftmenu ul {
margin: 0px;
}
.links_leftmenu li{
display: block;
padding-top:15px;
padding-left:26px;
font-size: 12px;
text-decoration: none;
list-style-type: none;
color:#FFF;
}
.leftmenu-link_all{
color:#6b726b;
font-weight: normal;
text-decoration: none;
}
.leftmenu-link_all:hover{
color:#d01414;
font-weight:bold;
text-decoration: none;
}
.leftmenu-link_1{
background: url(images/1_green.jpg) no-repeat 0 0;
}
.leftmenu-link_1:hover{
background: url(images/1_red.jpg) no-repeat 0 0;
}
.leftmenu-link_2{
background: url(images/2_green.jpg) no-repeat 0 0;
}
.leftmenu-link_2:hover{
background: url(images/2_red.jpg) no-repeat 0 0;
}
.leftmenu-link_3{
background: url(images/2_green.jpg) no-repeat 0 0;
}
.leftmenu-link_3:hover{
background: url(images/2_red.jpg) no-repeat 0 0;
}
.leftmenu-link_4{
background: url(images/2_green.jpg) no-repeat 0 0;
}
.leftmenu-link_4:hover{
background: url(images/2_red.jpg) no-repeat 0 0;
}
.leftmenu-link_5{
background: url(images/2_green.jpg) no-repeat 0 0;
}
.leftmenu-link_5:hover{
background: url(images/2_red.jpg) no-repeat 0 0;
}
.leftmenu-link_6{
background: url(images/3_green.jpg) no-repeat 0 0;
}
.leftmenu-link_6:hover{
background: url(images/3_red.jpg) no-repeat 0 0;
}
.links_leftmenu a{
background: url(images/bgn.jpg) repeat;
}




<div id="left">
<ul class="links_leftmenu">
<li class="leftmenu-link_1">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li class="leftmenu-link_2">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li class="leftmenu-link_3">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li class="leftmenu-link_4">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li class="leftmenu-link_5">[Только зарегистрированные пользователи могут видеть ссылки. ]
<li class="leftmenu-link_6">[Только зарегистрированные пользователи могут видеть ссылки. ][/list]
</div></div>

Но проблема осталась небольшая — в IE 5 и 6 версий самая верхняя картинка не подгружается (см. скриншот - для лучшей наглядности бэкграунд выделен синим цветом), в других брайзерах все нормально. Может дело в padding и margin (есть такое подозрение у меня...)? Подключение csshover.htc проблему не решило

[Aykroyd]

Но проблема осталась небольшая — в IE 5 и 6 версий самая верхняя картинка не подгружается

Дайте [Только зарегистрированные пользователи могут видеть ссылки. ] для LI.

P.S.
Вместо leftmenu-link_all рекомендую пользоваться [Только зарегистрированные пользователи могут видеть ссылки. ].

[lenmikh]

Дайте [Только зарегистрированные пользователи могут видеть ссылки. ] для LI.

P.S.
Вместо leftmenu-link_all рекомендую пользоваться [Только зарегистрированные пользователи могут видеть ссылки. ].

СПАСИБО, ПОМОГЛО!!!!