Whatever:hover 是一個小小的腳本,它可以迅速、自動地為IE6,IE7,IE8添加標準的 :hover、:active 和:focus 偽類支持。第三版引入了 ajax 支持,意味著通過 javascript動態添加到文檔中的任意html元素也同樣可以在IE中響應 :hover、:active 和 :focus 樣式。
如果你已經對使用 whatever:hover 很熟練,現在只是想下載它,你可以直接跳轉到獲取最新版本。而對于其它想深入了解它的人,請繼續閱讀。
你只需要將 whatever:hover 鏈接到 body 元素就可以了。注意這里的 behavior 屬性中的 URL 是相對于 html 文件的,而不是像背景圖片地址一樣是相對于 css 文件的路徑。
body { behavior: url("csshover3.htc"); }
所有的瀏覽器都提供了一些方法,讓你用 javascript 查詢樣式表中定義好的規則或者動態地插入新規則。正常情況下,IE對所有它不支持的規則返回 “unknown”。例如:一條關于 “div p:first-child” 的規則將會被改成 "divp:unknown”, 而一條關于 "p a[href]” 的規則將整體地作為 "unknown" 返回。幸運的是 IE 把 :hover偽類認為是它支持的樣式規則,并且會將它保持原樣。
IE 還支持所謂的行為(behaviors),不僅包括預定義的功能比如動態加載內容或者持續數據存儲,也包括你可以在一個后綴為 .htc 或者 .hta 為的文件中創建的自定義行為。這些行為通過 css 實現與 html 節點關聯,并“增強”這些被指定行為中的樣式選擇器選中的節點。
綜上所述,創建一個行為來查找樣式表中 IE 不支持的元素,并以一些其它手段“欺騙”影響的到元素讓它們應用樣式表中關聯的樣式。這個復雜的操作中包含的步驟大致可以描述為:
在所有的樣式表中搜索 IE 不支持的 :hover 偽類規則; 插入一條 IE 支持的,例如帶 class 名稱的新規則; 最后,設置腳本事件來切換目標元素的 class 名稱。通過這種方式,:hover、:active 和 :focus 就可以得到(IE 的)支持了。而作為開發人員,你除了包含這個行為以外不需要做任何事。所有的工作都將自動完成。
與第1版和第2版比較,第3版對動態加入的 html (ajax) 也同樣支持。另外還有一個改動是原來第1版和第2版采用的是在頁面加載事件中主動搜索影響到的元素,而在第3版中改為借助表達式(expressions)讓節點自己回調。關于這部分你可以閱讀帶注釋的版本獲取更多細節。
:hover 一個很常見的用途就是用列表創建菜單系統。用這個行為來創建一個兩級的菜單系統是再容易不過的事情了。例如,如果你從 suckerfish dropdown (一個帶有下拉菜單的網頁,關于這個頁面和效果的描述,參見 A List Apart article)上把 javascript 刪除掉了,它仍然能正常工作。
新聞熱點
疑難解答