IE6不支持hover賦予css樣式如何解決

本篇內容介紹了“IE6不支持hover賦予css樣式如何解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

對于類似的“p:hover”、“img:hover”、"li:hover"、".abc:hover"、“#header:hover”...IE6不支持hover，鼠標經過不會出現賦予css樣式，以下我們個大家介紹一種最簡單兼容各大瀏覽器特別針對IE6支持:hover解決方法。

首先需要對body樣式設置一個插件文件（csshover.htc），這樣ie6即可支持hover表達式。

讓IE6支持hover解決方法步驟如下：

一、csshover.htc下載   

立即下載 （1.755KB）

下載壓縮包文件解壓后得到文件“csshover.htc”，為了避免css樣式引入“csshover.htc”路徑出錯，將此文件與css文件放到相同文件夾內。這里實驗就不單獨新建css文件，就只有一個"index.html"文件，所以這里將“csshover.htc”與“index.html”放到相同文件夾里。

放入相同文件夾內

二、在body樣式選擇器內引入文件  

定義在body樣式選擇器內“body { behavior:url("csshover.htc"); }”，可放于樣式代碼最前面。

body選擇器內定義引入csshover.htc

這樣就大功告成，此網頁css樣式定義如div:hover、li:hover、p:hover、自定義命名css選擇名稱（.abc:hover）、img:hover，所定義賦予樣式IE6均支持了。

特別特別注意：
要成功需要直接在HTML中加以下代碼（HTML文件內直接引入csshover.htc文件）：

<style> body{behavior:url("csshover.htc");} /* 使用時候注意路徑正確 */</style>

注意csshover.htc路徑。

三、ie6支持hover案例   

我們分別進行三個實驗實例。

1、實驗實例描述

第一個實例：對img標簽賦予hover（即 img:hover{...} ）樣式，鼠標經過時圖片邊大，出現邊框與padding距離；

第二個實例：對li標簽賦予hover(即 li:hover{...} )樣式，鼠標經過時候ul li標簽出現黑色邊框；

第三個實例：對自己隨便命名css樣式選擇名稱賦予hover（即 .abc:hover{...} ）,鼠標經過此abc對象DIV盒子時候，對象內文字變為紅色。

2、此三個小實驗實例CSS代碼如下：

body { behavior:url("csshover.htc"); }/* css注釋：別忘記csshover.htc，使用時候注意路徑 */  img{width:165px; height:60px; background:#090;}/* 原本圖片寬度和高度背景顏色 */ img:hover{width:200px; height:200px; padding:3px; border:2px solid #00F; cursor:pointer} /* hover鼠標經過賦予讓圖片變寬 高，設置padding和2px藍色邊框、css cursor為鼠標指針樣式  */  li:hover{ border:1px solid #000}/* li列表標簽鼠標經過出現黑色邊框 */  .abc:hover{ color:#F00}/* 對象.abc鼠標經過其內容css字體顏色變紅色 */

3、三實驗對應HTML源代碼：

<!-- html注釋：1 鼠標經過圖片變大 --> <img src="億速云-logo-2013.gif" alt="DIVCSS5 LOGO" />  <!-- 2 鼠標經過li出現邊框  --> <ul> <li>對li設置hover樣式，鼠標經過加CSS邊框</li> </ul>  <!-- 3 鼠標經過abc盒子內文字變為紅色  --> <div class="abc">對.abc:hover，鼠標經過時候文字顏色變紅</div>

4、實例DW截圖

“IE6不支持hover賦予css樣式如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！