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中不工作

回答

相關問題