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

WBOY
Release: 2016-05-16 12:09:21
Original
1512 people have browsed it

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这类东西,行为和结构不分离,不推荐使用。
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template