【javascript】csshover解決ie6下hover相容問題

來源:互聯網
上載者:User

在 ie6 下只有 a 才支援 :hover 偽類,其它標籤都不支援,很是讓人頭疼。不過,可以通過 csshover.htc 可以解決 ie6 的 hover 相容問題。

它利用 javascript 指令碼來給元素的的樣式定義,如果檢測到 hover 定義,就給元素設定 onmouseover 和 onmouseout 事件,以此來實現 hover 的效果。

附上 csshover.htc 代碼:

<attach event="ondocumentready" handler="parseStylesheets"/><script language="JScript">var currentSheet, doc = window.document, activators = {    onhover:{on:'onmouseover', off:'onmouseout'},    onactive:{on:'onmousedown', off:'onmouseup'}};function parseStylesheets(){    var sheets = doc.styleSheets, l = sheets.length;    for(var i = 0; i < l; i++){       parseStylesheet(sheets[i]);    };};function parseStylesheet(sheet){    if(sheet.imports){        try{            var imports = sheet.imports, l = imports.length;            for(var i = 0; i < l; i++){                parseStylesheet(sheet.imports[i]);            };        }catch(securityException){};    };    try{        var rules = (currentSheet = sheet).rules, l = rules.length;        for(var j = 0; j < l; j++){            parseCSSRule(rules[j]);        };    }catch(securityException){};};function parseCSSRule(rule){    var select = rule.selectorText, style = rule.style.cssText;    if(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).test(select) || !style) return;    var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');    var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);    var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];    var affected = select.replace(/:hover.*$/, '');    var elements = getElementsBySelect(affected);    currentSheet.addRule(newSelect, style);    for(var i = 0; i < elements.length; i++){        new HoverElement(elements[i], className, activators[pseudo]);    };};function HoverElement(node, className, events){    if(!node.hovers) node.hovers = {};    if(node.hovers[className]) return;    node.hovers[className] = true;    node.attachEvent(events.on, function(){        node.className += ' ' + className;    });    node.attachEvent(events.off, function(){        node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),'');    });};function getElementsBySelect(rule){    var parts, nodes = [doc];    parts = rule.split(' ');    for(var i = 0; i < parts.length; i++){        nodes = getSelectedNodes(parts[i], nodes);    };    return nodes;};function getSelectedNodes(select, elements){    var result, node, nodes = [];    var classname = (/\.([a-z0-9_-]+)/i).exec(select);    var identify = (/\#([a-z0-9_-]+)/i).exec(select);    var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');    for(var i = 0; i < elements.length; i++){        result = tagName ? elements[i].all.tags(tagName) : elements[i].all;         for(var j = 0; j < result.length; j++){            node = result[j];            if((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' + classname[1] + '\\b').exec(node.className)))) continue;            nodes[nodes.length] = node;        };    };    return nodes;};</script>

引用方式:

body{behavior:url(css/csshover.htc);}

需要注意的是引用 htc 的路徑問題:不管你是在 css 檔案裡面引用 htc 檔案,還是 html 裡面引用 htc 檔案,都是 html 檔案去找 htc 的路徑。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.