IE7 より前のバージョンが status_Experience 交換を行わないと疑似クラスをサポートしないという問題を解決するいくつかの方法

IE7 より前のバージョンでは、A ステータスのない疑似クラスがサポートされておらず、この問題を解決するために通常は Javascript に依存しています。最近、この種の問題についてよく質問されるため、参考のためにいくつかの方法をまとめました。 。
方法 1

HTMLdog からの javascript ファイル。

コードをコピーします。 コードは次のとおりです。 🎜>

function suckerfish(type, tag,parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = ( parentId== null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag); 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) {
(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, "p");



スクリプトの変更可能な部分

// ここに効果が必要なタグを記述します
suckerfish(sfHover , "INPUT"); (sfFocus, "INPUT");
suckerfish(sfHover, "p");

CSS

input:focus,input.sffocus {
背景: #F8F8F8; 🎜> カラー: #333333;
ボーダー: 1px ソリッドレッド;
}

背景: #E EE;
> ボーダー: 1px ソリッド
}
p:hover,p.sfhover{
背景: #EEE; > ボーダー: 1px ソリッド
}
p:hover, p.sfhover{
background: #EEE;
color: #333;
}

above コードの最初のクラスは CSS2 をサポートするブラウザー用であり、2 番目のクラスは CSS2 をサポートするブラウザー用です。 IE6以下。特定のタグを設定すると、ページ全体のタグが同じスタイルになることに注意してください。
方法 2

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 += 「レイオン」;
}

function mouseGoesOut()
{
this.className = originalClassNameString;
}
pinballEffect();

脚本変更可能な部分

1. if (allElements[i].className.indexOf('hovereffect') !=-1)

CSS

1. .hovereffect{
2. 背景: #CCC;
3. }

は、効果が必要な場所で class="hovereffect" を使用します。この方法はより活発です。
方法 3

は、ネットワーク上でよく見られる onmouseover、onmouseout を使用します。この種の製品は、その動作および構造を分離することなく、推奨するものではありません。