Plusieurs méthodes pour résoudre le problème selon lequel les versions inférieures à IE7 ne prennent pas en charge les pseudo-classes sans un échange status_Experience

Les versions inférieures à IE7 ne prennent pas en charge les pseudo-classes sans statut A et s'appuient généralement sur Javascript pour résoudre ce problème. Récemment, les gens posent souvent des questions sur ce genre de problème, j'ai donc compilé plusieurs méthodes. Les scripts proviennent de sites Web étrangers pour votre référence. .
Méthode 1

fichier javascript, de Htmldog

Copier le code Le code est le suivant :

function sucerfish(type, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = ( parentId== null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
                type(sfEls); sfEls = 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+=" sffocus"; > }
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" sffocus\b"), "");
                                                                                                                                                                                     🎜>poisson meunier( sfHover, "p");



La partie modifiable du script

//Écrivez ici la balise dont vous avez besoin pour l'effet
Suckerfish(sfHover , "INPUT ");
meunier(sfFocus, "INPUT");
meunier(sfHover, "p");

CSS

input:focus,input.sffocus {
arrière-plan : #F8F8F8 ;

couleur : #333333 ;
bordure : 1px rouge uni
}
input:hover,input.sfhover{
arrière-plan : #E EE ; couleur : #369 ;
bordure : 1px solide #069 ;
}
p:hover,p.sfhover{
arrière-plan : #EEE > bordure : 1px solide #069 ;
p:hover,p.sfhover{
background: #EEE;
color: #333;
}

ci-dessus La première classe du code est destinée aux navigateurs prenant en charge CSS2. , et le second est pour IE6 et versions antérieures. Il convient de noter que si vous définissez une certaine balise, la balise de toute la page utilisera le même style.
Méthode 2

fichier javascript




Copier le code


Le code est le suivant :

var W3CDOM = (document.createElement && document.getElementsByTagName);
//window.onload = pinballEffect;

function pinballEffect()
{
    if (!W3CDOM) retour ;
    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. Contexte : #CCC ;
   3. }

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

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