图片上鼠标悬停和焦点更改为红色X在IE中点击时发生更改

Question

我正在使用superfish菜单，并且必须将所有背景图像更改替换为<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测试。 “红色X”我认为无处不在：在IE中，没有从src载入的图像。它在左上角显示一个带有红色X图像的黑色边框，并显示替代文本。看起来好像它正在执行mouseenter focusin事件处理程序，并在单击时向src添加另一个-hover.png。所以src正在改变点击imgName-hover-hover.png

另一个编辑！所以focusin事件处理程序在点击时被触发。

编辑：任何人想知道，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中为容器设置默认大小值取决于它的设置