Question

我有一个jQuery悬停效果的问题，基本上它在我的Chrome和IE版本中运行得很好，而且它不适用于Firefox。

这是非常简单的jQuery代码，我没有看到任何原因导致它无效。有没有什么好的工具来调试jQuery？

http://www.ryansammut.com/jQueryHover.html

Answer 1

您错过了选择器中的“＃”

$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(contactButtonMenu  <---).attr("src","images/contactButtonHover.png");
            }, function() {
        $(contactButtonMenu   <----).attr("src","images/contactButton.png");
    });
});

$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(shopNowButton   <----).attr("src","images/shopNow.png");
            }, function() {
        $(shopNowButton    <----).attr("src","images/shopNowHover.png");
    });
});

Answer 2

您只需要一份文件。此外，悬停也找不到他必须更改的项目（contactButtonMenu和shopNowbutton）。尝试以下方法：

$(document).ready(function(){
    $(".contactButton").hover(function() {
        $(this).attr("src","images/contactButtonHover.png");
            }, function() {
        $(this).attr("src","images/contactButton.png");
    });

    $(".contactButton").hover(function() {
        $(this).attr("src","images/shopNow.png");
            }, function() {
        $(this).attr("src","images/shopNowHover.png");
    });
});




<img id="contactButtonMenu" src="images/contactButton.png" alt"Contact Button" class="contactButton" />

您的alt标记也格式不正确，请将其更改为：alt="Contact Button"上一行

Answer 3

替换它，

 alt"Contact Button"  =>  alt="Contact Button"

我认为这段代码更好..

$(document).ready(function(){
    $(".shopNowButton").hover(function() {
            $(this).attr("src","images/shopNow.png");
                }, function() {
            $(this).attr("src","images/shopNowHover.png");
        });
    });

    $(".contactButton").hover(function() {
            $(this).attr("src","images/contactButtonHover.png");
                }, function() {
            $(this).attr("src","images/contactButton.png");
        });
});

jQuery Hover - 在Firefox中不起作用

3 个答案: