Es gibt mehrere Möglichkeiten, das Problem zu lösen, dass Versionen unter IE7 keine Pseudoklassen ohne Status_Experience-Austausch unterstützen

Versionen unter IE7 unterstützen keine Pseudoklassen ohne A-Status und verlassen sich in der Regel auf Javascript, um dieses Problem zu lösen. In letzter Zeit werden häufig Fragen zu dieser Art von Problemen gestellt, daher habe ich als Referenz mehrere Methoden zusammengestellt .
Methode 1

Javascript-Datei, von Htmldog

Code kopieren Der Code lautet wie folgt:

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+="
}
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+="
} }
sfEls[ i].onblur=function() {
this.className=this.className.replace(new RegExp(" sffocus\b"), "");
                                                                                                                  🎜>Saugerfisch (sfHover, „p“);



Der veränderbare Teil des Skripts

//Schreiben Sie hier den Tag, an dem Sie den Effekt benötigen
suckerfish(sfHover , "INPUT"); (sfFocus, „INPUT“);

CSS

input:focus,input.sffocus {
background: #F8F8F8; 🎜> Farbe: #333333;
Rand: 1px durchgehend rot;
input:hover,input.sfhover{

color: #369; > Grenze: 1px solide #069; }
p:hover,p.sfhover{
Hintergrund: #EEE; > Grenze: 1px solide #069; p.sfhover{
Hintergrund: #EEE;
Farbe: #333;
}

oben Die erste Klasse im Code ist für Browser, die CSS2 unterstützen, und die zweite für IE6 und niedriger. Beachten Sie, dass beim Festlegen eines bestimmten Tags das Tag auf der gesamten Seite denselben Stil verwendet.
Methode 2

Javascript-Datei




Code kopieren


Der Code lautet wie folgt:

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. Hintergrund: #CCC;
   3. }

在需要应用效果的地方用class="hovereffect"调用。这种方法比较灵活。
方法三使用网上常见的onmouseover, onmouseout这类东西,行为和结构不分离,不推荐使用.