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版采用的是在頁(yè)面加載事件中主動(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)頁(yè),關(guān)于這個(gè)頁(yè)面和效果的描述,參見 A List Apart article)上把 javascript 刪除掉了,它仍然能正常工作。
新聞熱點(diǎn)
疑難解答
圖片精選