Question

你好请有人帮忙...我已经尝试了一切让它在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中的最后一种风格是它不起作用的地方......

这就是正在发生的事情（查看即obv。）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;}

注意额外的'li'。它应该覆盖.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;

repeat-x 之前只是缺少空间。我已经习惯了。 menu2 span：hover 和 .menu2 a：hover span：hover 两者都有效，这意味着你不需要a：hover。

跨度悬停在IE中

2 个答案: