Question

我的页面中显示了3种不同的产品。每种产品都应具有不同的发光颜色。我使用的代码在

下面

 $('.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中的错误吗？

Kinldy帮助

您可以查看here，向下滚动，产品会显示

更新：我根据#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();

        });

现在我看到，发光是＆＃34;未定义＆＃34;。我不明白为什么。然而，这在Chrome中运行良好。但不是在Firefox ..

我需要重置color css属性。这是我目前卡住的地方。有人请帮忙..

Answer 1

“JQMIGRATE：jQuery.browser已弃用”

检查一下：

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

Answer 2

我找到了解决方案。我将ID属性设置为所有img标签＆amp;在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标签做了这个。

jquery .glow方法在Firefox中无法正常工作

2 个答案: