跨度在IE中悬停

你好，请问有人可以帮助...我已经尝试了一切，以获得这项工作在IE（典型） - 我需要一个跨度悬停与背景图像，多个背景悬停图像也在同一个div中。这是一个导航栏。跨度在IE中悬停

下面的代码：

<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

任何帮助将是惊人的..

来源

2011-03-06 321

与您的问题没有关系，您还应该尝试使用更大一点的图像和CSS Sprite技术来减少HTTP请求。 – tenshimsm 2011-03-06 19:27:30

选择器.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之间添加一个空格。

来源

2011-03-06 18:52:09 Dimitry

尝试解决方案的最后一行，plz。 – Dimitry 2011-03-06 18:59:08

对不起，我得到的是用我提供的行替换：.menu2 a:hover span {display:block;color:#fff;background:transparent url(/images/menu-icons/test/hov-repeat.png)repeat-x;}，并在右括号和repeat-x语句之间添加空格; – Dimitry 2011-03-06 19:18:51

你必须在li上触发悬停，而不是'a'。因此，与a：hover一致的行将以.menu2 li开头：将鼠标悬停在一个span上{替代。 – Dimitry 2011-03-06 19:49:30

这工作在IE8和IE8兼容模式，以及其他浏览器。

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

还只是重复-X之前缺乏空间。我用过。 menu2 span：hover and .menu2 a：hover span：hover这两个工作，这意味着你不需要a：悬停。

来源

2011-03-06 19:13:09 tenshimsm

使用Dimitry的解决方案也可以。 – tenshimsm 2011-03-06 19:16:23

实际上还有2双眼睛......迪米特里有溶剂。他的阵容已经被空间纠正了。我只是在你的回答中看不到他的界限。对不起Dimitry。 – tenshimsm 2011-03-06 19:40:58

你做了改变吗？因为这里工作。 – tenshimsm 2011-03-06 20:24:51

跨度在IE中悬停

回答

相关问题