|
在IE7以下版本一直是不支持无A状态伪类的,通常都要靠Javascript来解决的,最近经常有人问起此类问题,故整理了几种方法,脚本来自国外网站,供大家参考。 方法一
javascript文件,来自Htmldog . 复制代码 代码如下: function suckerfish(type, tag, parentId) { if (window.attachEvent) { window.attachEvent("onload", function() { var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag); type(sfEls); }); } }
sfHover = function(sfEls) { for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } }
sfFocus = function(sfEls) { for (var i=0; i<sfEls.length; i++) { sfEls[i].onfocus=function() { this.className+=" sffocus"; } sfEls[i].onblur=function() { this.className=this.className.replace(new RegExp(" sffocus\\b"), ""); } } }
suckerfish(sfHover, "INPUT"); suckerfish(sfFocus, "INPUT"); suckerfish(sfHover, "p");
脚本可改动的部分
//这里写入你需要效果的标签 suckerfish(sfHover, "INPUT"); suckerfish(sfFocus, "INPUT"); suckerfish(sfHover, "p");
CSS
input:focus,input.sffocus { background: #F8F8F8; color: #333333; border: 1px solid red; } input:hover,input.sfhover{ background: #EEE; color: #369; border: 1px solid #069; } p:hover,p.sfhover{ background: #EEE; color: #333; border: 1px solid #069; } p:hover,p.sfhover{ background: #EEE; color: #333; }
上面代码中第一个类是给支持CSS2的浏览器,第二个是给IE6及以下版本的。需注意的是,你给某标签设定了,那么整个页面内的这个标签都会沿用同一个样式。 方法二
javascript文件. 复制代码 代码如下: var W3CDOM = (document.createElement && document.getElementsByTagName); //window.onload = pinballEffect;
function pinballEffect() { if (!W3CDOM) return; var allElements = document.getElementsByTagName('*'); var originalBackgrounds=new Array(); for (var i=0; i<allElements.length; i++) { if (allElements[i].className.indexOf('hovereffect') !=-1) { allElements[i].onmouseover = mouseGoesOver; allElements[i].onmouseout = mouseGoesOut; } } }
function mouseGoesOver() { originalClassNameString = this.className; this.className += " lay-on"; }
function mouseGoesOut() { this.className = originalClassNameString; } pinballEffect();
脚本可改动的部分
1. if (allElements[i].className.indexOf('hovereffect') !=-1)
CSS
1. .hovereffect{ 2. Background: #CCC; 3. }
在需要应用效果的地方用class="hovereffect"调用。这种方法比较灵活。 方法三
使用网上常见的onmouseover、onmouseout这类东西,行为和结构不分离,不推荐使用。 |
|