Span Hover в IE

Question

Здравствуйте, PLS может кто-то помочь ... Я пробовал все, чтобы заставить это работать в IE (типичный) - мне нужно, чтобы наведите курсор на фоновое изображение, с несколькими изображениями фонового изображения в том же div. Это для навигационной панели.

Вот код:

<div class="menu2"> 
    <ul> 
    <li><a href="#"><span><img src="/images/Structure/home-active.png" /></span></a></li> 
    <li><a href="#"><span>Directory</span></a></li> 
    <li><a href="#"><span>Events</span></a></li> 
    <li><a href="#"><span>Jobs</span></a></li> 
    <li><a href="#"><span>Property</span></a></li> 
    <li><a href="#"><span>News</span></a></li> 
    <li><a href="#"><span>Community</span></a></li> 
    <li><a href="#"><span>Travel</span></a></li> 
    <li><a href="#"><span>Advertise</span></a></li> 
    <li><a href="#"><span>Login</span></a></li> 
    </ul> 
    </div> 

И CSS:

/* Main Menu */ 
.menu2 {clear:both;position:relative;z-index:2;margin:0 auto;width:100%;height:41px;max-width:1280px;} 
.menu2 ul.first {float:left;} 
.menu2 li {float:left;height:41px;background:transparent url(/images/menu-icons/test/left.png) left top no-repeat;margin:0 5px;} 
.menu2 li a {padding:0 4px;float:left;color:#222222;font-size:14px;line-height:40px;font-weight:bold;background:transparent url(/images/menu-icons/test/right.png) right top no-repeat;} 
.menu2 li a span {height:41px;padding:0 8px;display:block;background:transparent url(/images/menu-icons/test/repeat.png) repeat-x;} 

.menu2 li:hover {text-decoration:none;background:transparent url(/images/menu-icons/test/hov-left.png) left top no-repeat;} 
.menu2 li a:hover {text-decoration:none;background:transparent url(/images/menu-icons/test/hov-right.png) right top no-repeat;} 
.menu2 a:hover span {display:block;color:#fff;background:transparent url(/images/menu-icons/test/hov-repeat.png)repeat-x;} 

Как вы можете увидеть самый последний стиль в CSS, где это не работает ...

Это (вид в том, что происходит) http://www.dev.inside-guides.co.uk/brentwood/pages/news.html

Любая помощь будет изумительной ..

Answer 1

Появляется проблема с селектором .menu2 a:hover span. Попробуйте заменить эту линию на:

 

.menu2 li a:hover span {display:block;color:#fff;background:transparent url(/images/menu-icons/test/hov-repeat.png) repeat-x;} 

Обратите внимание на дополнительные «ли». Он должен перезаписать стиль, определенный .menu2 li a span ...

Также вы можете добавить пробел между символами) и repeat-x.

Answer 2

Это работало в режиме совместимости с IE8 и IE8, а также с другими браузерами.

background:transparent url(http://www.dev.inside-guides.co.uk/images/menu-icons/test/hov-repeat.png) repeat-x; 

был просто недостаток пространства перед повтора-х. Я использовал. menu2 span: hover и .menu2 a: hover span: hover оба работали, что означает, что вам не нужен a: hover.