jQuery 悬停 - 在 Firefox 中不工作答案

【问题标题】：jQuery Hover - Not Working in FirefoxjQuery 悬停 - 在 Firefox 中不工作
【发布时间】：2011-06-21 16:32:55
【问题描述】：

我的 jQuery 悬停效果有问题，基本上它在我的 Chrome 和 IE 版本中运行良好，但在 Firefox 上无法运行。

这是非常简单的 jQuery 代码，我看不出它不工作的任何原因。有什么好的工具可以调试jQuery吗？

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

【问题讨论】：

请将您网站中的代码添加到此问题中。
像这样添加 $('#shopNowButton')
@K6t - 谢谢伙计，暂时忘记了 '。你用什么工具来调试 jQuery？

标签： jquery html css debugging hover

【解决方案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");
    });
});

【讨论】：

只需添加 '#contactButtonMenu' 而不是 contactButtonMenu 即可，谢谢 :)
@RyanSammut cool :) 顺便说一句，你可以使用 firebug 来调试 JS。它会显示事件被调用正常。只是选择器没有返回任何东西。

【解决方案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"

【讨论】：

悬停很好，你给我的效果不是我想要的，但是感谢你发现了alt问题。因为我需要的是 Contact Hover，所以 Shop Now 的 Hover 已关闭。

【解决方案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");
        });
});

【讨论】：

我希望当点击联系按钮时 shopNow 按钮关闭，而不仅仅是悬停效果，感谢您的回答。但是它不是固定的，此页面上的第一个答案。