Question

我有以下css，当我在Firefox中鼠标悬停但不是IE（6）时，它可以正常工作。

.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>

我正在寻找一种可以在IE（特别是6）和Firefox中使用的css解决方案。

Answer 1

除了IE6中的:hover元素之外，您无法将<a>规则分配给任何内容。试试

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


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

Answer 2

运行此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，是否有特殊原因？

Answer 3

可以使用jQuery使<a>元素可单击。它沿着这条线：

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

也许您可能希望为<li>元素提供游标的CSS样式，例如cursor: pointer

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

3 个答案: