标签: CSS

csshover.htc是什么?怎么解决IE6下标签元素支持hover兼容问题?

csshover.htc是什么?怎么解决IE6下标签元素支持hover兼容问题?
做网页前端的朋友都知道IE6浏览器只支持a标签的hover属性,但有时候为了网页的美观和写代码的方便,我们经常给其他标签元素添加hover属性,例如li:hover{color:#f00},但由于浏览器的兼容性问题用Ie6的用户就无法体验到这种效果了,这时候就要用csshover.htc来解决这种问题。

csshover.htc的原理就是用javascript脚本来给元素的样式定义,如果检测到hover定义,就给元素设置onmouseover和onmouseout事件,以此来实现hover的效果。

解决方法如下:
首先建立csshover.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>

引用方法:
<!–[if lte IE 6]>

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

<![endif]–>

csshover.htc文件百度网盘下载地址:
http://pan.baidu.com/s/1pLuBmQJ

JQuery双色表格

//双色表格
$(".TableA tbody tr:odd").addClass("bg");//奇数行
$(".TableA tbody tr:even").addClass("bg");//偶数行
$(".TableA tbody tr").mouseover(function(){ $(this).addClass("over"); }).mouseout(function(){$(this).removeClass("over");});//鼠标经过离开

CSS 背景半透明文字不透明兼容ie、火狐等浏览器

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> New Document </title>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
<style>
#wrapper
{
background: #369;
width:300px;
height:150px;
}
#div1
{
-moz-opacity: 0.3; /* FF 3.5以下 */
opacity: 0.3; /* FF 3.5及以上 */
filter: alpha(opacity=30); /* IE6及以上 */
background: #fff;
width: 200px;
height: 50px;
}
#div2
{
background: rgba(255, 255, 255, 0.3) !important; /* IE无效,FF有效 */
background: #fff;
filter: alpha(opacity=30);
width: 200px;
height: 50px;
}
#div2 span
{
position: relative;
}
</style>
</head>

<body>
<div id=”wrapper”>
<div id=”div1″>
<span>图层背景半透明,字体颜色也半透明</span>
</div>
<br />
<div id=”div2″>
<span>图层背景半透明,字体颜色不半透明</span>
</div>
</div>
</body>
</html>