css mouseover - 在FF中工作，但在IE中不工作

我有以下css，当我在Firefox中将鼠标移到它上面但不是IE（6）。css mouseover - 在FF中工作，但在IE中不工作

.PageMenu{ 
    list-style: none; 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    display: inline; 
    list-style-position:outside; 
} 

.PageMenu li{ 

    display: block; 
    padding: 0; 
    margin: 0; 
    line-height: 20px; 
    font-weight: bold; 
    border-bottom: 1px solid #ccc; 

} 

ul#PageMenu li:hover { 
    color: #000; 
    background-color: #ddd; 
}

的HTML是：

<ul class="PageMenu" id="PageMenu"> 
    <li>  
     <a title="test" class="getPage">Click this link</a> 
    </li> 
    <li> 
     <a title="test" href="#" class="getPage">Link text</a> 
    </li> 
</ul>

我正在寻找一个CSS溶液，这将在IE（特别是6）和Firefox工作。

来源

2011-06-27 martok

IE6 !!!!!!!!!!这是一个弃用的浏览器在IE8中测试你的应用程序。 –

这是在Intranet上运行的，IE6是用户拥有的唯一浏览器。这不会很快改变 – martok

您不能将:hover规则分配给IE6中除<a>之外的任何元素。尝试

ul#PageMenu a:hover { 
    color: #000; 
    background-color: #ddd; 
} 


ul#PageMenu a { 
    display: block; 
    width:100%; 
}

来源

2011-06-27 10:15:59 raveren

我认为他希望'li'具有悬停风格？ 'a：hover'看起来不会一模一样。好信息但是。 –

编辑CSS为anchor来覆盖li，所以效果是一样的。 – raveren

这会让整个'li'点击，我不认为OP会想要这样做，从他所描述的内容来看，我想只是通过突出显示悬停在线的内容来简化浏览行。 –

运行这款HTC文件似乎是最干净的方法：

下载此文件： http://www.kavoir.com/wp-content/uploads/2009/01/csshover3.htc

然后将其添加到您的CSS：

body { 
    behavior:url("/styles/csshover3.htc"); 
}

否则，你就需要去JS，这相当难看：

if (!window.XMLHttpRequest) 
{ 
    Event.observe(window, 'load', function() { 
     $$('ul#PageMenu li').each(function(e) { 
      Event.observe(e, 'mouseover', function() { 
       Element.addClassName(e, 'hover'); 
      }); 
      Event.observe(e, 'mouseout', function() { 
       Element.removeClassName(e, 'hover'); 
      }); 
     )}; 
    )}; 
}

就我个人而言，我不明白为什么你仍然试图支持IE6甚至IE7，有没有特别的原因？

来源

2011-06-27 10:15:44

迈尔斯，这是一个内联网。该公司拥有约7000台电脑全部运行IE6，因为需要这种设置的数百万欧元的软件。他们不能安装任何其他软件。 – martok

明白的人，试试以上，如果你不想那么试试JS解决方案！ :) –

Myles，谢谢你的回答。 – martok

有可能通过使用jQuery使<a>元素点击。它会沿着线：

$('#PageMenu li').click(function(e) { 
    window.location = $(this).find('a').attr('href'); 
    e.preventDefault(); 
});

也许你会想给<li>元素光标CSS样式，如cursor: pointer

来源

2011-06-27 11:19:18 Terry

css mouseover - 在FF中工作，但在IE中不工作

回答

相关问题