IE7 이하 버전이 A status_Experience 교환 없이 의사 클래스를 지원하지 않는 문제를 해결하는 여러 가지 방법

IE7 이하 버전에서는 A 상태가 아닌 의사 클래스를 지원하지 않으며 일반적으로 이 문제를 해결하기 위해 Javascript를 사용합니다. 최근 이러한 문제에 대해 문의하는 경우가 많아 참고용으로 몇 가지 방법을 컴파일했습니다. .
방법 1

Htmldog의 javascript 파일

코드 복사 코드는 다음과 같습니다.

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 , "INPUT")
suckerfish (sfFocus, "INPUT");
suckerfish(sfHover, "p");

CSS

input:focus,input.sffocus {
배경: #F8F8F8; 🎜> 색상: #333333;

테두리: 1px 단색 빨간색;
}
입력: hover,input.sfhover{
배경: #E EE; > 테두리: 1px 솔리드 #069;
}
p:hover,p.sfhover{
배경: #EEE; > 테두리: 1px 솔리드 #069; p.sfhover{
background: #EEE;
color: #333;
}

위 코드의 첫 번째 클래스는 CSS2를 지원하는 브라우저용이고 두 번째 클래스는 IE6 이하. 특정 태그를 설정하면 전체 페이지의 태그가 동일한 스타일을 사용한다는 점에 유의하세요.
방법 2

javascript 파일




코드 복사


코드는 다음과 같습니다.

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" 调用。这种方法比较灵活。
方法三

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