클릭시 IE에서 호버상의 소스 변경 및 IE가 빨간색 X로 변경됨

Question

나는 슈퍼 피쉬 메뉴로 작업 중이며 내가 따라야하는 접근성 가이드 라인에 따라 배경 이미지 변경 사항을 모두 <img src>으로 변경해야했습니다. 메뉴는 텍스트가있는 이미지로만 구성됩니다.

IE에서 이미지를 클릭하면 링크를 따라 가기 전에 간단히 빨간색 X 이미지로 변경되며 어떻게 든 제거해야하고 난처하게됩니다. 나는 전에 이것을 경험하지 못했습니다.

var thisImg = null, 
    newImg = null, 
    imgSrc = null; 

$(".sf-menu li").bind('mouseenter focusin', function() { 

    if ($(this).hasClass('sf-breadcrumb')) { 
     return; 
    } 
    else { 
     thisImg = $(this).find("img:first"), 
     newImg = thisImg.attr("src").replace(/.png/, "-hover.png"); 

     if ($(this).is(".sf-menu>li>ul>li")) { 
      thisImg.attr("src", newImg); 
     } 
     else { 
      $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/-hover.png/, ".png"); }); 
      thisImg.attr("src", newImg); 
     } 
    } 
}); 

$(".sf-menu li").bind('mouseleave focusout', function() { 

    if ($(this).hasClass('sf-breadcrumb')) { 
     return; 
    } 
    else { 
     thisImg = $(this).find("img:first"), 
     newImg = thisImg.attr("src").replace(/-hover.png/, '.png'); 

     if ($(this).is(".sf-menu>li>ul>li")) { 
      thisImg.attr("src", newImg); 
     } 
     else { 
      $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/.png/, "-hover.png"); }); 
      thisImg.attr("src", newImg); 
     } 
    } 
}); 

편집 : IE8에서 테스트하고 있습니다. "Red X"는 유비쿼터스라고 생각했습니다. IE에서는 src에서로드하지 않은 이미지입니다. 왼쪽 상단에 빨간색 X 이미지가있는 검은 색 테두리가 표시되고 대체 텍스트가 표시됩니다. 그것은 mouseenter focusin 이벤트 처리기를 실행하고 클릭 할 때 또 다른 -hover.png를 src에 추가하는 것처럼 보입니다. src가 imgName-hover-hover.png로 변경 될 때

다른 편집! 그래서 이벤트 핸들러가 클릭되면 focusin됩니다.

EDIT : IE와 FF는 클릭 이벤트를 포커스 이벤트로 처리 했으므로 mouseenter 핸들러와 focusin 핸들러를 실행하고있었습니다. 내 새 코드가 있습니다.

var thisImg = null, 
    newImg = null, 
    thatImg = null; 

$(".sf-menu li").on('mouseenter', function() { 
    if ($(this).hasClass('sf-breadcrumb')) { 
     return; 
    } 
    else { 
     thisImg = $(this).find("img:first"), 
     newImg = thisImg.attr("src").replace(/.png/, "-hover.png"); 

     if ($(this).is(".sf-menu>li>ul>li")) { 
      thisImg.attr("src", newImg); 
     } 
     else { 
      $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/-hover.png/, ".png"); }); 
      thisImg.attr("src", newImg); 
     } 
    } 
}); 

$(".sf-menu li").on('mouseleave', function() { 
    if ($(this).hasClass('sf-breadcrumb')) { 
     return; 
    } 
    else { 
     thisImg = $(this).find("img:first"), 
     newImg = thisImg.attr("src").replace(/-hover.png/, '.png'); 

     if ($(this).is(".sf-menu>li>ul>li")) { 
      thisImg.attr("src", newImg); 
     } 
     else { 
      $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/.png/, "-hover.png"); }); 
      thisImg.attr("src", newImg); 
     } 
    } 
}); 

$(".sf-menu a").focus(function() { 
    thisImg = $(this).find("img:first"), 
    newImg = thisImg.attr("src").replace(/.png/, "-hover.png"); 

    if (thisImg.attr("src") == thatImg.attr("src")) { 
     return; 
    } 
    else if ($(this).parent("li").hasClass('sf-breadcrumb')) { 
     return; 
    } 
    else { 
     if ($(this).is(".sf-menu>li>ul>li")) { 
      thisImg.attr("src", newImg); 
     } 
     else { 
      $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/-hover.png/, ".png"); }); 
      thisImg.attr("src", newImg); 
     } 
     thatImg = thisImg; 
    } 
}); 

$(".sf-menu a").blur(function() { 
    thisImg = $(this).find("img:first"), 
    newImg = thisImg.attr("src").replace(/-hover.png/, '.png'); 

    if (thisImg.attr("src") == thatImg.attr("src")) { 
     return; 
    } 
    else if ($(this).parent("li").hasClass('sf-breadcrumb')) { 
     return; 
    } 
    else {   
     if ($(this).is(".sf-menu>li>ul>li")) { 
      thisImg.attr("src", newImg); 
     } 
     else { 
      $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/.png/, "-hover.png"); }); 
      thisImg.attr("src", newImg); 
     } 
     thatImg = thisImg; 
    } 
}); 

이 방법은 어떤 방법 으로든 정리할 수 있지만 적어도 작동하는 것은 확실합니다.

Answer 1

새로운 소스의 이미지로 바꾸기 전에 이미지의 표시 또는 가시성을 변경하기 만하면됩니다.

그런 다음 교체 한 후에 다시 변경하십시오.

때문에 이런 일이 다른 코드 교체 : 귀하의 사용 인라인 디스플레이가 당신이 할 거라고 당신이해야 할 수 있습니다

thisImg = $(this).find("img:first"); 
$(this).find("img:first").css('display', 'none'); 
newImg = thisImg.attr("src").replace(/-hover.png/, '.png'); 

..... 물론

if ($(this).is(".sf-menu>li>ul>li")) { 
     thisImg.attr("src", newImg); 
    } 
    else { 
     $(".sf-breadcrumb").find("img:first").attr("src", function(i,s){ return s.replace(/.png/, "-hover.png"); }); 
     thisImg.attr("src", newImg); 
    } 
$(this).find("img:first").css('display', 'block'); 

을 설정에 따라 컨테이너의 CSS에 기본 크기 값을 설정하십시오.