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

时间:2014-06-30 22:14:46

标签: jquery html5 css3

我的页面中显示了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();

        });

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

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

2 个答案:

答案 0 :(得分:0)

答案 1 :(得分:0)

我找到了解决方案。我将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标签做了这个。