Whatever:hover 是一個小小的腳本，它可以迅速、自動地為IE6，IE7，IE8添加標準的 :hover、:active 和:focus 偽類支持。第三版引入了 ajax 支持，意味著通過 Javascript動態(tài)添加到文檔中的任意html元素也同樣可以在IE中響應(yīng) :hover、:active 和 :focus 樣式。

如果你已經(jīng)對使用 whatever:hover 很熟練，現(xiàn)在只是想下載它，你可以直接跳轉(zhuǎn)到獲取最新版本。而對于其它想深入了解它的人，請繼續(xù)閱讀。

使用方法

你只需要將 whatever:hover 鏈接到 body 元素就可以了。注意這里的 behavior 屬性中的 URL 是相對于 html 文件的，而不是像背景圖片地址一樣是相對于 css 文件的路徑。

body { behavior: url("csshover3.htc"); }

工作原理

所有的瀏覽器都提供了一些方法，讓你用 Javascript 查詢樣式表中定義好的規(guī)則或者動態(tài)地插入新規(guī)則。正常情況下，IE對所有它不支持的規(guī)則返回 “unknown”。例如：一條關(guān)于 “div p:first-child” 的規(guī)則將會被改成 "divp:unknown”， 而一條關(guān)于 "p a[href]” 的規(guī)則將整體地作為 "unknown" 返回。幸運的是 IE 把 :hover偽類認為是它支持的樣式規(guī)則，并且會將它保持原樣。

IE 還支持所謂的行為（behaviors），不僅包括預(yù)定義的功能比如動態(tài)加載內(nèi)容或者持續(xù)數(shù)據(jù)存儲，也包括你可以在一個后綴為 .htc 或者 .hta 為的文件中創(chuàng)建的自定義行為。這些行為通過 css 實現(xiàn)與 html 節(jié)點關(guān)聯(lián)，并“增強”這些被指定行為中的樣式選擇器選中的節(jié)點。

綜上所述，創(chuàng)建一個行為來查找樣式表中 IE 不支持的元素，并以一些其它手段“欺騙”影響的到元素讓它們應(yīng)用樣式表中關(guān)聯(lián)的樣式。這個復(fù)雜的操作中包含的步驟大致可以描述為：

• 在所有的樣式表中搜索 IE 不支持的 :hover 偽類規(guī)則；
• 插入一條 IE 支持的，例如帶 class 名稱的新規(guī)則；
• 最后，設(shè)置腳本事件來切換目標元素的 class 名稱。

通過這種方式，:hover、:active 和 :focus 就可以得到（IE 的）支持了。而作為開發(fā)人員，你除了包含這個行為以外不需要做任何事。所有的工作都將自動完成。

與第1版和第2版比較，第3版對動態(tài)加入的 html (ajax) 也同樣支持。另外還有一個改動是原來第1版和第2版采用的是在頁面加載事件中主動搜索影響到的元素，而在第3版中改為借助表達式（expressions）讓節(jié)點自己回調(diào)。關(guān)于這部分你可以閱讀帶注釋的版本獲取更多細節(jié)。

示例：菜單效果

:hover 一個很常見的用途就是用列表創(chuàng)建菜單系統(tǒng)。用這個行為來創(chuàng)建一個兩級的菜單系統(tǒng)是再容易不過的事情了。例如，如果你從 suckerfish dropdown （一個帶有下拉菜單的網(wǎng)頁，關(guān)于這個頁面和效果的描述，參見 A List Apart article）上把 Javascript 刪除掉了，它仍然能正常工作。

但是多級的菜單需要做不同的處理。這是由于 IE 不支持子選擇符 ‘>'，子選擇符可以完美地顯示下級子菜單，而不是連更深層的菜單一起顯示出來。

li:hover > ul { /* 在 IE 下無效 */ }

有一種可供選擇的方法可以只使用簡單的子孫選擇符來模擬這種行為（主要是針對 IE）。還有種不太成熟的方法是應(yīng)用多個類定義，但是更簡單的方法是利用 CSS 選擇符的不同優(yōu)先級(specificity).每一條 css 規(guī)則都有特定的重要等級，這個等級可以簡單地根據(jù)一條規(guī)則中的不同元素來計算。以元素名稱為基準值 “1″，類、偽類和屬性選擇符重要性（權(quán)重）為 “10″，然后元素 id 為 “100″。比如下面的例子。

ul ul { display:none; }
li:hover ul { display:block; }

這樣做能夠生效的原因，就是選擇符的優(yōu)先級不同。第一條規(guī)則只包含兩個元素名稱，這樣它的權(quán)重值（優(yōu)先級）就是2。第二條規(guī)則也包含兩個元素名稱，但是 :hover 偽類的權(quán)重值（優(yōu)先級）是10，所以加起來的值就是12。由于第二條規(guī)則比第一條規(guī)則優(yōu)先，因此被鼠標滑過的 li 元素內(nèi)部的ul 將被顯示。

那么這個對于解決 >子選擇符的問題有什么幫助呢？是這樣，如果一條權(quán)重值（優(yōu)先級）為12的規(guī)則定義所有的子菜單都要顯示，我們只需要創(chuàng)建一條權(quán)重值（優(yōu)先級）大于12的規(guī)則來把下一級的菜單隱藏起來。然后，那個菜單又需要另一條優(yōu)先級更高的規(guī)則來顯示，一直循環(huán)下去。對于3級的導(dǎo)航來說，需要的 css代碼短得讓人意外：

/* 2 和 13 */
ul ul, li:hover ul ul { display:none; }
/* 12 和 23*/
li:hover ul, li:hover li:hover ul { display:block; }

這種方式可以無需附加任何類樣式實現(xiàn)無限級嵌套菜單（4級或更多級需要需要繼續(xù)添加更多規(guī)則）。

腳本事件的性能優(yōu)化

現(xiàn)在還剩下一件事需要考慮。.htc 文件在所有樣式表文件中搜索 :hover 規(guī)則，并且按照 css 文件的定義對所有它認為需要用腳本處理停留效果的元素附加鼠標滑過和移出事件。為了找出這些(被影響的)元素，所有去掉 :hover 偽類選擇到的元素以及被 :hover 偽類修飾的元素本身，都會被選擇并且進行處理。一條類似這樣的規(guī)則

#menu li:hover ul { ... }

…將會被調(diào)整成下面這樣來查找所有可能需要響應(yīng)鼠標滑過事件的元素：

#menu li { ... }

很顯然這會選中整個菜單中的每一個 <li>元素，并對其中一大堆不需要鼠標事件（在當(dāng)前情況下）的元素附加事件。這個問題可以很輕松地得到解決，我們可以對包含子菜單的列表元素添加一個類樣式，比如 "folder"。這樣一來，調(diào)整（去除:hover）之后的樣式規(guī)則變成了

#menu li.folder { ... }

…可以高效地直接選中那些真正需要事件的元素。缺點是為了改善腳本的性能，你需要添加一個類樣式（這個類樣式的添加純粹是為了視覺效果，而且放棄了li:hover 方式實現(xiàn)菜單的通用性）。但是，從另一個角度考慮的話，也許你反正也要用一個類來把這些列表元素與普通元素區(qū)別開來，那就無所謂了。

為了直觀地說明上述問題，請查看綜合示例。希望你喜歡。

文件下載及更新說明：

文件下載:

Version 3.11 (:hover, :active and :focus) 
 (:hover, :active 和 :focus)
Minified, 2.8K (right click & save) | commented, 9.7K | both, zipped

Version 1.42.060206 (:hover and :active) download | view
Version 2.02.060206 (1.42 and :focus) download | view

說明:

說明1：如果在使用 whatever:hover 的過程中遇到問題，請 讓我知道!  由于第3版比較新，可能會存在一些無法預(yù)知的問題。

說明2：確保你的web服務(wù)器把 htc 文件按照 text/x-component 的 mime類型發(fā)送。關(guān)于這方面的更多信息，可以參閱 Aldo的個人博客。如果你的主機支持 .htaccess 文件，可以添加下面這行代碼：

AddType text/x-component .htc

說明3：第三版支持在 IE6 以上版本中使用 :hover 和 :active，對 IE7 和 IE8 還支持:focus。由于表達式（expression)在 IE8 標準模式下不支持，所以 whatever:hover 只在 IE8 的怪異模式(Quirks Mode) 下運行。實際上在 IE8 標準模式中也根本不需要這個腳本了。

說明4：如果使用這個腳本之后網(wǎng)頁變慢，請嘗試對更加具體的選擇符運用 :hover偽類，比如添加元素名稱、使用元素id，或者類名稱。例如："div#someId li.group:hover”, 而不要只用".group:hover”。這樣能夠很大程度上減少搜索和解析時間，并能減少需要應(yīng)用的事件。請閱讀 性能優(yōu)化 獲得更多信息。

說明5：第2版也支持 :focus 偽類，僅限于 A、INPUT、和 TEXTAREA元素。但是，由于類似"input:focus" 這樣的選擇符被 IE 的樣式表對象返回為 "input:unknown"，腳本將基于這些 "unkonwn"規(guī)則來附加獲得焦點和失去焦點事件，這個問題同樣存在于其它瀏覽器無法識別的偽類。因此，使用2.0版本的時候，你無法在 IE 中對A、INPUT和 TEXTAREA元素應(yīng)用瀏覽器無法識別的偽類，因為他們統(tǒng)統(tǒng)都會被處理成獲得焦點樣式。如果你確實需要這個功能，請使用1.4版或者3.0版。

在 Naar Voren （一個關(guān)于web開發(fā)的德語網(wǎng)站）上，有我用德語寫的一篇關(guān)于用純css 在菜單系統(tǒng)中使用 :hover 的更詳細的文章（德語版）。對于不懂德語的網(wǎng)友，可以查看該文章的英文翻譯版。

非常感謝 Arnoud Berendsen 和 Martin Reurings 提供的創(chuàng)意和支持，感謝 Robert Jan Verkade 和 Naar Voren 上的朋友們發(fā)表我的文章，還要感謝 Eric Meyer 對這個腳本給予支持和在他的書里提到我的這個網(wǎng)頁（指 《Eric Meyer談CSS（卷2）》 第六章》――譯者注）。

作者：peter ned 原文：whatever:hover

譯者：小李刀刀 首發(fā)：Whatever:hover