Resolves several methods for IE7 without a-state pseudo-class: Experience Exchange

In IE7 the following version has been not supported without a-state pseudo-class, usually rely on JavaScript to solve, recently often asked about such problems, so the collation of several methods, scripts from foreign sites for your reference.
Method One

JavaScript files from Htmldog.
Copy CodeThe code is as follows:
function suckerfish (type, tag, ParentID) {
if (window.attachevent) {
Window.attachevent ("onload", function () {
var sfels = (parentid==null)? document.getElementsByTagName (Tag):d Ocument.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");


Parts of the script that can be changed

Write the label you want to 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;
}

The first class in the code above is for browsers that support CSS2, and the second one is for IE6 and the following versions. It is important to note that you set a tag on the entire page, and the same style will be used for the label.
Method Two

JavaScript files.
Copy CodeThe 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 ();


Parts of the script that can be changed

1. if (Allelements[i].classname.indexof (' Hovereffect ')!=-1)

Css

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

Called with class= "Hovereffect" where the effect needs to be applied. This method is more flexible.
Method Three

It is not recommended to use such things as onmouseover and onmouseout, which are common on the Internet, and do not separate behaviors and structures.

