圖片上鼠標懸停和焦點更改爲紅色X在IE中點擊時發生更改

我正在使用superfish菜單，並且必須將所有背景圖像更改替換爲<img src>由於我強制遵循的某些輔助功能準則而發生的更改。所以菜單完全由其中包含文本的圖像組成。圖片上鼠標懸停和焦點更改爲紅色X在IE中點擊時發生更改

在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; 
    } 
});

我相信這可以用某種方式清理，但至少它的工作。

來源

2012-05-15 NJW

請問你可以發表一個你的意思嗎？我不知道'紅X'你們的男人。 –

請務必提及您遇到問題的Internet Explorer版本。較舊或較新版本的行爲可能不同。 – veeTrain

我只是想改變圖像的顯示或可視性，然後再嘗試用新來源的圖像替換圖像。

然後改回其更換後。

所以這樣的事情，以取代其他代碼：

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中爲容器設置默認大小值取決於它的設置

來源

2012-05-15 16:59:01 Rooster

事件處理程序完全按照原樣工作。問題是當在IE中點擊一個導航項時，它執行mouseenter focusin處理程序。 – NJW

圖片上鼠標懸停和焦點更改爲紅色X在IE中點擊時發生更改

回答

相關問題