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中测试。 “Red 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中为容器设置默认大小值，具体取决于其设置方式

单击时，Ish上的源更改将悬停并将焦点更改为IE中的红色X.

1 个答案: