Several methods to solve the problem that versions below IE7 do not support pseudo-classes without A status_Experience exchange

Versions below IE7 have not supported pseudo-classes without A status, and usually rely on Javascript to solve this problem. Recently, people often ask about this kind of problem, so I have compiled several methods. The scripts are from foreign websites for your reference.
Method 1

javascript file, from Htmldog.

Copy code 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); 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, "p");



The changeable part of the script

//Write the tag you need the 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: #E EE;
color: #369;
border: 1px solid #069;
}
p:hover,p.sfhover{
background: #EEE; > border: 1px solid #069;
}
p:hover,p.sfhover{
background: #EEE;
color: #333;
}

above The first class in the code is for browsers that support CSS2, and the second one is for IE6 and below. It should be noted that if you set a certain tag, the tag in the entire page will use the same style.
Method 2

javascript file.




Copy code


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

脚本可改动的部分

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

CSS

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

在需要应用效果的地方用class="hovereffect"调用。这种方法比较灵活。
方法三

使用网上常见的onmouseover、onmouseout这类东西，行为和结构不分离，不推荐使用。