时间:2021-05-18
在IE7以下版本一直是不支持无A状态伪类的,通常都要靠Javascript来解决的,最近经常有人问起此类问题,故整理了几种方法,脚本来自国外网站,供大家参考。
方法一
javascript文件,来自Htmldog.
复制代码 代码如下:
functionsuckerfish(type,tag,parentId){
if(window.attachEvent){
window.attachEvent("onload",function(){
varsfEls=(parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
}
sfHover=function(sfEls){
for(vari=0;i<sfEls.length;i++){
sfEls[i].onmouseover=function(){
this.className+="sfhover";
}
sfEls[i].onmouseout=function(){
this.className=this.className.replace(newRegExp("sfhover\\b"),"");
}
}
}
sfFocus=function(sfEls){
for(vari=0;i<sfEls.length;i++){
sfEls[i].onfocus=function(){
this.className+="sffocus";
}
sfEls[i].onblur=function(){
this.className=this.className.replace(newRegExp("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:1pxsolidred;
}
input:hover,input.sfhover{
background:#EEE;
color:#369;
border:1pxsolid#069;
}
p:hover,p.sfhover{
background:#EEE;
color:#333;
border:1pxsolid#069;
}
p:hover,p.sfhover{
background:#EEE;
color:#333;
}
上面代码中第一个类是给支持CSS2的浏览器,第二个是给IE6及以下版本的。需注意的是,你给某标签设定了,那么整个页面内的这个标签都会沿用同一个样式。
方法二
javascript文件.
复制代码 代码如下:
varW3CDOM=(document.createElement&&document.getElementsByTagName);
//window.onload=pinballEffect;
functionpinballEffect()
{
if(!W3CDOM)return;
varallElements=document.getElementsByTagName('*');
varoriginalBackgrounds=newArray();
for(vari=0;i<allElements.length;i++)
{
if(allElements[i].className.indexOf('hovereffect')!=-1)
{
allElements[i].onmouseover=mouseGoesOver;
allElements[i].onmouseout=mouseGoesOut;
}
}
}
functionmouseGoesOver()
{
originalClassNameString=this.className;
this.className+="lay-on";
}
functionmouseGoesOut()
{
this.className=originalClassNameString;
}
pinballEffect();
脚本可改动的部分
1.if(allElements[i].className.indexOf('hovereffect')!=-1)
CSS
1..hovereffect{
2.Background:#CCC;
3.}
在需要应用效果的地方用class="hovereffect"调用。这种方法比较灵活。
方法三
使用网上常见的onmouseover、onmouseout这类东西,行为和结构不分离,不推荐使用。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
csshover相信做前端开发都知道,IE6、IE7都不支持:active伪类,IE6更甚,连:hover伪类都不支持。为了解决这个问题,一般都会引入一个css
ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮动;以下总结方法,
解决方法有两种:一种是CSS,使用background-size:cover实现图片的拉伸效果,但是IE8及以下版本不支持background-size,于是可
一、CSSHACK 以下两种方法几乎能解决现今所有HACK. 1,!important 随着IE7对!important的支持,!important方法现
目前各大浏览器基本上都支持ES6的新特性,其中Chrome和Firefox浏览器对ES6新特性最友好,IE7~11基本不支持ES6。以下是各大浏览器支持情况及开