Solutions for IE7 or earlier versions do not support several methods without A-state pseudo-classes _ experience exchange

Solutions for IE7 and earlier versions do not support methods without A-state pseudo classes. IE7 and earlier versions do not support non-A-state pseudo classes. Generally, Javascript is used to solve these problems, some people have asked such questions recently, so they have sorted out several methods. The scripts are from foreign websites for your reference.
Method 1

Javascript file, from Htmldog.

The Code is as follows:

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 ");

Modifiable script

// Write the tag of the expected effect here
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;
}

In the above Code, the first class is for browsers that support CSS2, and the second is for IE6 and later versions. Note that if you set a tag, the tag on the entire page will follow the same style.
Method 2

Javascript file.

The Code is as follows:

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 ();

Modifiable script

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

CSS

1. hovereffect {
2. Background: # CCC;
3 .}

Use class = "hovereffect" to call an application. This method is flexible.
Method 3

The behavior and structure of onmouseover and onmouseout are not separated and are not recommended.