jquery .glow方法在Firefox中不能正常工作。

Question

我有三个不同的产品显示在我的网页。每种产品都应该有不同的发光颜色。我使用的代码如下

 $('.yellow').on('mouseenter', function () {
            $(this).glow({ radius: "20", color: "#D7CD3A" });
        })
        .on('mouseout', function () {
            $(this).glow({ radius: "20", color: "#D7CD3A", disable: true });
        });

        $('.purple').on('mouseenter', function () {
            $(this).glow({ radius: "20", color: "#a354bb" });
        })
        .on('mouseout', function () {
            $(this).glow({ radius: "30", color: "#a354bb", disable: true });
        });

        $('.green').on('mouseenter', function () {
            $(this).glow({ radius: "30", color: "#538b73" });
        })
        .on('mouseout', function () {
            $(this).glow({ radius: "20", color: "#538b73", disable: true });
        });

在Chrome中，这是非常好的工作。我只是了解到IE不支持这一点，但在Firefox中，它只采用了我要突出显示的第一个产品的发光颜色。

对于前，当我悬停紫色产品时，就会显示紫色悬停颜色。然后当我悬停在黄色的产品上时，同样的紫色辉光颜色会被显示出来，而它应该显示黄色的辉光颜色。

我哪里出问题了吗？或者这是Firefox中的一个bug？

金迪帮助

您可以检查它，这里，向下滚动，产品将被显示

更新:我按照#ProllyGeek的建议修改了代码

var glowm;
$('.yellow').on('mouseover', function () {
            glowm = $(this).glow({ radius:"20", color: "#D7CD3A" });
        })
        .on('mouseout', function () {
            //$(this).glow({ radius: "20", color: "#D7CD3A", disable: true });
            glowm.remove();

        });

现在我看到那光芒是“未定义的”。我不明白为什么。然而，这在Chrome中工作得很好。但在火狐中却不是。

我需要重置颜色css属性。这就是我目前被困的地方。请有人帮忙。

Answer 1

我找到了解决办法。我将ID属性设置为所有img标记&在javascript中引用此#id。代码现在如下所示。

$('#yellow1').on('mouseenter', function () {
            $(this).glow({ radius: "20", color: "#D7CD3A" });
        })
        .on('mouseout', function () {
            //$(this).glow({ radius: "20", color: "#D7CD3A", disable: true });
            $(this).glow({ disable: true });
        });

我每次使用img标签都是这么做的。

Answer 2

JQMIGRATE:不推荐jQuery.browser

看看这个：

https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jquerybrowser-is-deprecated