井井客

搜索

如何做到让li:hover兼容IE6

CSS伪类用于向某些选择器添加特殊的效果,而li:hover伪类正常情况下是不兼容IE6的,如何做到li:hover兼容IE6是接下来我们需要解决的问题。

如何做到让li:hover兼容IE6

前端童鞋相信都有一个恶梦之源:IE6,最害怕的事情就是"不兼容IE6"。相信其中的苦胆就不用我多说神马了。

在支持CSS的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。大致如下:

    :active			向被激活的元素添加样式。
    :focus			向拥有键盘输入焦点的元素添加样式。
    :hover			当鼠标悬浮在元素上方时,向元素添加样式。
    :link			向未被访问的链接添加样式。
    :visited		    向已被访问的链接添加样式。
    :first-child	    向元素的第一个子元素添加样式。
    :lang			向带有指定 lang 属性的元素添加样式。

需要注意的是在css定义中 a:hover必须被置于a:link和a:visited之后,才是有效的;a:active必须被置于a:hover之后,才是有效的。

略有跑题,言归正传。li:hover在谷歌火狐中支持的很好,但是不兼容IE6,则成了它的死穴。通过下面两步,即可实现li:hover兼容IE6。

步骤一

添加下面一段代码到head头部标签中:

<!--[if lte IE 6]>
<style type="text/css">
body { behavior:url("文件路径/csshover3.htc"); }
</style>
<![endif]-->

步骤二

新建一个csshover3.htc名称的文件

添加下面一段内容到文件中

<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
/**
* Whatever:hover - V3.11
* http://www.xs4all.nl/~peterned/
*
* Copyright (c) 2009 Peter Nederlof
* Licensed under the LGPL license
* http://creativecommons.org/licenses/LGPL/2.1
*/
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\-]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
</script>  

上传这个一个文件到你FTP中(万分注意,文件须与你的页面在同一域名下,否则很可能出现错误),路径则需与步骤一路径相同。

当然,你也可以用JS/JQ去编写一个简单的程序,比如当带有某个样式的元素onmouseover时添加一个hover的样式名,onmouseout时去掉hover样式名,再在样式表中,对这个XX.hover样式进行类似于XX:hover的样式定义,也是可以实现在IE6下兼容的,当然也这偏离了"li:hover兼容IE6",只能算作是仿照li标签:hover效果。像下面这样:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿照li标签:hover让"li:hover兼容IE6"</title>
<style type="text/css">
li.hover { color:#f00;}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>
<body>
<ul>
<li>移上去吧</li>
<li>移吧移吧</li>
</ul>
<script>
$('li').mouseover(function(){
	$(this).addClass("hover");
}).mouseout(function(){
	$(this).removeClass("hover");
});	
</script>
</body>
</html>

因为用JQ比较简单所以我就用JQ来写了,旨在传达一下思路,大家看是不是也比较简单呢?

文章TAG:css

作者:井井客整理来源:互联网
本文标题:如何做到让li:hover兼容IE6
本文链接:/c/266.html

上一篇:DW快捷键你值得收藏一下
下一篇:利用float制作兼容ie6的纯css下拉菜单

文章分类

相关阅读

随便看看