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

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

使用方法

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

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

工作原理

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

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

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

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

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

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

示例：菜單效果

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

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

li:hover > ul { /* 在 IE 下無(wú)效 */ }

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

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

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

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

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

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

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

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

#menu li:hover ul { ... }

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

#menu li { ... }

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

#menu li.folder { ... }

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

為了直觀地說(shuō)明上述問(wèn)題，請(qǐng)查看綜合示例。希望你喜歡。

文件下載及更新說(shuō)明：

文件下載:

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

說(shuō)明:

說(shuō)明1：如果在使用 whatever:hover 的過(guò)程中遇到問(wèn)題，請(qǐng) 讓我知道!  由于第3版比較新，可能會(huì)存在一些無(wú)法預(yù)知的問(wèn)題。

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

AddType text/x-component .htc

說(shuō)明3：第三版支持在 IE6 以上版本中使用 :hover 和 :active，對(duì) IE7 和 IE8 還支持:focus。由于表達(dá)式（expression)在 IE8 標(biāo)準(zhǔn)模式下不支持，所以 whatever:hover 只在 IE8 的怪異模式(Quirks Mode) 下運(yùn)行。實(shí)際上在 IE8 標(biāo)準(zhǔn)模式中也根本不需要這個(gè)腳本了。

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

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

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

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

作者：peter ned 原文：whatever:hover

譯者：小李刀刀 首發(fā)：Whatever:hover – 無(wú)需javascript讓IE支持豐富偽類(lèi)

轉(zhuǎn)載請(qǐng)注明出處。
上面的文件，腳本之家打包下載地址