解決IE7以下版本不支援無A狀態偽類的幾種方法_經驗交流

在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[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[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 {
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這類東西，行為和結構不分離，不推薦使用。

