云南網站建設創新企業 昆明多彩網絡公司

為什么標簽:hover在ie6下無效?

來源：昆明多彩網絡公司 日期：2011-10-13 閱讀： 發表評論

來看一下代碼：

HTML代碼：<a href="http://www.spiro-crafts-skegness.com">昆明網站制作</a>；

CSS代碼：a:hover { color: #c00 }；

這樣做的效果就是鼠標移動到a標簽上文字變成紅色。

看到這里很多朋友就會試著在其他標簽上加上hover偽類，比如下面的代碼：

HTML代碼：<li>云南網站建設</li>；

CSS代碼：li:hover { color: #c00}

預想的效果是鼠標移動到li標簽上，li內的文字變成紅色，但是很快就會發現這個效果在IE6下面無法如愿。

這里就是我們要說的網站制作技巧之一：IE6下的hover偽類唯一性，瀏覽器市場上大致就：是ie6和ie8以上系列；火狐系列；chrome系列；其中的ie6只支持a標簽的hover偽類，而其他瀏覽器則支持多個標簽的hover偽類，這就很容易解釋為什么li的hover標簽效果不能在ie6下面實現了。

那么遇到這種情況，該如何去解決呢？有兩個辦法：

1. css嵌套辦法：html代碼：<a href="http://www.spiro-crafts-skegness.com"><img src="test.jpg" /></a>，要讓圖片鼠標移動上去的時候需要有css效果就必須用a標簽將圖片包含進去，該辦法有局限性。
2. js的mouseover事件來實現，這種效果比較通用，兼容ie6和其他瀏覽器，是比較理想的解決方案。