0

我正在使用 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 中测试。我认为“Red X”无处不在：在 IE 中，不是从 src 加载的图像。它在左上角显示带有红色 X 图像的黑色边框，并显示替代文本。似乎它正在执行 mouseenter focusin 事件处理程序，并在您单击时将另一个 -hover.png 添加到 src 中。因此，点击时 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;  
    }
});

我确信这可以通过某种方式进行清理，但至少它是有效的。

4

1 回答 1

0

在您尝试将其替换为来自新来源的图像之前，我只想更改图像的显示或可见性。

换完之后再换回去。

所以像这样替换你的其他代码：

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-15T16:59:01.770 回答