為什么標(biāo)簽:hover在ie6下無效?
來源：昆明多彩網(wǎng)絡(luò)公司 日期：2011-10-13 閱讀： 發(fā)表評論
眾所周之a(chǎn):hover可以實(shí)現(xiàn)a標(biāo)簽在鼠標(biāo)移動(dòng)上去的樣式，但是ie6下面就無法實(shí)現(xiàn)其他標(biāo)簽的hover偽類，只有通過js或者其他方式來實(shí)現(xiàn)。
來看一下代碼：
HTML代碼：<a href="http://www.hc888shop.com">昆明網(wǎng)站制作</a>；
CSS代碼：a:hover { color: #c00 }；
這樣做的效果就是鼠標(biāo)移動(dòng)到a標(biāo)簽上文字變成紅色。
看到這里很多朋友就會(huì)試著在其他標(biāo)簽上加上hover偽類，比如下面的代碼：
HTML代碼：<li>云南網(wǎng)站建設(shè)</li>；
CSS代碼：li:hover { color: #c00}
預(yù)想的效果是鼠標(biāo)移動(dòng)到li標(biāo)簽上，li內(nèi)的文字變成紅色，但是很快就會(huì)發(fā)現(xiàn)這個(gè)效果在IE6下面無法如愿。
這里就是我們要說的網(wǎng)站制作技巧之一：IE6下的hover偽類唯一性，瀏覽器市場上大致就：是ie6和ie8以上系列；火狐系列；chrome系列；其中的ie6只支持a標(biāo)簽的hover偽類，而其他瀏覽器則支持多個(gè)標(biāo)簽的hover偽類，這就很容易解釋為什么li的hover標(biāo)簽效果不能在ie6下面實(shí)現(xiàn)了。
那么遇到這種情況，該如何去解決呢？有兩個(gè)辦法：
- css嵌套辦法：html代碼：<a href="http://www.hc888shop.com"><img src="test.jpg" /></a>，要讓圖片鼠標(biāo)移動(dòng)上去的時(shí)候需要有css效果就必須用a標(biāo)簽將圖片包含進(jìn)去，該辦法有局限性。
- js的mouseover事件來實(shí)現(xiàn)，這種效果比較通用，兼容ie6和其他瀏覽器，是比較理想的解決方案。
發(fā)表評論評論列表（有 條評論）