IE6下不支持除a以外的hover效果的解决办法

废话不说,直接上方法!

1.下载csshover.htc文件;

代码如下:

<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* Pseudos - V1.30.050121 - hover & active
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2005 - Peter Nederlof
*
* Credits - Arnoud Berendsen
*          - Martin Reurings
*           - Robert Hanson
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/

var currentSheet, doc = window.document, activators = {
onhover:{on:‘onmouseover‘, off:‘onmouseout‘},
onactive:{on:‘onmousedown‘, off:‘onmouseup‘}
}

function parseStylesheets() {
//window.alert("hi");
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>

2.在head中写入

body { behavior: url(css/csshover.htc); }/*注意路径*/

3.大功告成!

--------------------------------------------------------------------

PS:

一般对div选择器样式设置:hover ie6浏览器不支持,如li:hover img:hover .abc:hover非a链接标签设置hover其ie6均不支持,对于类似的“p:hover”、“img:hover”、"li:hover"、".abc:hover"、“#header:hover”...IE6不支持hover,鼠标经过不会出现赋予css样式,此方法

,此网页css样式定义如div:hover、li:hover、p:hover、自定义命名css选择名称(.abc:hover)、img:hover,所定义赋予样式IE6均支持了。

时间: 2024-10-09 23:37:01

IE6下不支持除a以外的hover效果的解决办法的相关文章

【css】修正ie6下不支持position:fixed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

IE6不支持:hover伪类效果的解决办法

:hover是在CSS中用来制作效果最常用到的一个伪类,比如:标签或div上的鼠标悬停效果 li:hover,div:hover等. 但这种效果是css2及以上版本才添加的,对于只支持css1的浏览器就显示不出来. 在IE6中只兼容a:hover,要使用li:hover或div:hover,需引用一个文件使其兼容: csshover.htc (点击直接查看) 放在网站的根目录下,并在css文件(或者<style>标签)中,加上 body { behavior:url("...cssh

IE6不支持圆角效果的解决办法

IE6(7/8)不支持border-radius属性,所以其中的圆角效果显示不出来,可以通过引用ie-css3.htc的方法解决. ie-css3.htc(点击可直接查看) 将文件放在放在页面的根目录下,并在css文件(或者<style>标签)中,加上 body { behavior:url("...ie-css3.htc"); } 放在其他目录下也行,注意路径对即可. 其它问题可参考官网:http://fetchak.com/ie-css3/ IE6不支持圆角效果的解决办

windows及linux下安装django simple captcha 遇到的各种问题及解决办法

转载自http://www.cnblogs.com/descusr/p/3225874.html 所有程序写完之后,验证码图片不显示,点击图片地址会提示如下错误,并且在linux下的纠正办法 用pil产生验证码出现:ImportError: The _imagingft C module is not installed 这个是由于PIL没有编译freetype导致的 查看 lib/python2.7/site-packages/PIL/ 看看 _imagingft.so 是否存在(至关重要,因

win7下安装matlab后打开出错&ldquo;error starting desktop&rdquo;的解决办法

在matlab快捷图标上右键,选择"还原以前的版本"--"兼容性"选项卡,在"以兼容模式运行这个程序"前面打勾,并选择"windows vista",在下面的"特权等级"中,勾选"以管理员身份运行此程序".OK,到这里就解决了.[注意]是用"windows vista"系列的兼容模式,不要用XP兼容模式!   参考自:http://zhidao.baidu.com/l

jmail组件 对象不支持此属性或方法: &#39;JMail.ServerAddress&#39; 的解决办法

jmail组件是asp最常用的邮件发送工具,自己有一个网站,已经使用这个jmail组件有8年了,但不知道为什么在12号突然出现无法正常发送邮件的问题, 后来经过测试代码,发现IIS报的错误为:对象不支持此属性或方法: 'JMail.ServerAddress',遇到不明白的,当然就是先度娘了,百度了2天都没有发现有相同错误的案例及解决的办法, 我的代码如下: Dim JMail Set JMail=Server.CreateObject("JMail.Message") if err

Eclipse下ADB报错:Android ADB server didn&#39;t ACK,解决办法

转载请注明出处:http://blog.csdn.net/xiaanming/article/details/9401981 ADB server didn't ACK 这个问题会困恼很多的新手朋友,我以前刚开始做Android的时候也遇到过这个问题,不过自己百度,google啥的,也不知道怎么就给解决了,看到群里很多新手朋友都会问这个问题,说实话我也没有一个解决这个问题的终极方法(百试百灵的那种,哈哈),自己没遇到也没有认真的去对待他,今天,就是在今天,我打开Eclipse连上手机,准备调试程

解决ie6下不支持fix属性,模拟固定定位

1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>模拟固定定位fix</title> 6 <style> 7 html{ height:100%; overflow:hidden;} 8 body{marg

IE6、7下块级元素设置display:inline-block不换行的解决办法

使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和高(依实际情况而定),在现在浏览器中没有什么问题,但是IE6.7下,当把block元素设置成inline-block之后,还是在分别的两行,下面我们看一下现象. 代码以及IE6.7下的表现 CSS: body { padding: 10px; } .block_to_inlineblock, .in