Whatever:hover 是一個(gè)小小的腳本，它可以迅速、自動(dòng)地為IE6，IE7，IE8添加標(biāo)準(zhǔn)的 :hover、:active 和:focus 偽類支持。第三版引入了 ajax 支持，意味著通過 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 查詢樣式表中定義好的規(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偽類認(rèn)為是它支持的樣式規(guī)則，并且會(huì)將它保持原樣。

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

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

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

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

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

示例：菜單效果

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

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

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

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

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

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

那么這個(gè)對(duì)于解決 >子選擇符的問題有什么幫助呢？是這樣，如果一條權(quán)重值（優(yōu)先級(jí)）為12的規(guī)則定義所有的子菜單都要顯示，我們只需要?jiǎng)?chuàng)建一條權(quán)重值（優(yōu)先級(jí)）大于12的規(guī)則來把下一級(jí)的菜單隱藏起來。然后，那個(gè)菜單又需要另一條優(yōu)先級(jí)更高的規(guī)則來顯示，一直循環(huán)下去。對(duì)于3級(jí)的導(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; }

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

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

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

#menu li:hover ul { ... }

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

#menu li { ... }

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

#menu li.folder { ... }

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

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

文件下載及更新說明：

文件下載:

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 的過程中遇到問題，請(qǐng) 讓我知道!  由于第3版比較新，可能會(huì)存在一些無法預(yù)知的問題。

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

AddType text/x-component .htc

說明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è)腳本了。

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

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

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

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

作者：peter ned 原文：whatever:hover

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