Beberapa kaedah untuk menyelesaikan masalah bahawa versi di bawah IE7 tidak menyokong kelas pseudo tanpa pertukaran status_Pengalaman

Versi di bawah IE7 tidak menyokong pseudo-class tanpa status A, dan biasanya bergantung pada Javascript untuk menyelesaikan masalah ini Baru-baru ini, orang sering bertanya tentang masalah seperti ini, jadi saya telah menyusun beberapa kaedah Skrip adalah dari laman web asing untuk rujukan anda .
Kaedah 1

fail javascript, daripada Htmldog

Salin kod Kodnya adalah seperti berikut:

fungsi suckerfish(jenis, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = ( parentId== null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag); sfHover = function(sfEls) {
untuk (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) {
untuk (var i=0; i sfEls[i].onfocus= function() {
this.className+=" sffocus"; i].onblur=function() {
this.className=this.className.replace(new RegExp("sffocus\b"), "");
                                                                                                                                 🎜>ikan penyedut(sfHover, "p");



Bahagian skrip yang boleh diubah

//Tulis tag yang anda perlukan kesannya di sini
suckerfish(sfHover , "INPUT"); (sfFokus, "INPUT");
suckerfish(sfHover, "p"); 🎜> warna: #333333;
jidar: 1px merah padat; > sempadan: 1px pepejal #069;
}
p:hover,p.sfhover{
latar belakang: #EEE; > sempadan: 1px pepejal #069; p.sfhover{
latar belakang: #EEE;
warna: #333;
}

di atas Kelas pertama dalam kod adalah untuk pelayar yang menyokong CSS2, dan yang kedua adalah untuk IE6 dan ke bawah. Perlu diingat bahawa jika anda menetapkan teg tertentu, teg dalam keseluruhan halaman akan menggunakan gaya yang sama.
Kaedah 2

fail javascript




Salin kod


Kodnya adalah seperti berikut:

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

fungsi pinballEffect()
{
    jika (!W3CDOM) kembali;
    var allElements = document.getElementsByTagName('*');
    var originalBackgrounds=new Array();
    untuk (var i=0; i    {
         jika (allElements[i].className.indexOf('hovereffect') !=-1)                                    🎜>            semua Elemen[i].onmouseover = mouseGoesOver;
            allElements[i].onmouseout = mouseGoesOut;
        }
    }
}

fungsi mouseGoesOver()
{
    originalClassNameString = this.className;
    this.className += " lay-on";
}

fungsi mouseGoesOut()
{
    this.className = originalClassNameString;
}
pinballEffect();



脚本可改动的部分

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

   1. .hovereffect{
   2. Latar Belakang: #CCC;
   3. }

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