CODEWITHSUNDEEP
jqueryhtmlcssdebugginghover
Ryan S
Ryan S

Reputation: 3268

jQuery Hover - Not Working in Firefox

I have a problem with a jQuery Hover Effect, basically it's working perfectly in my version of Chrome and IE, and it is not working on Firefox.

It's very simple jQuery code, and I'm not seeing any reason why it's not working. Are there any good tools to debug jQuery?

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

Upvotes: 0

Views: 3663

Answers (3)

Jinbom Heo
Jinbom Heo

Reputation: 7400

replace it,

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

and I think this code is better..

$(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");
        });
});

Upvotes: 0

Tim
Tim

Reputation: 9489

You only need one document.ready. Also the hover couldn't find the item he has to change (contactButtonMenu and shopNowbutton). try the following:

$(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" />

your alt tag is also malformed, change it to: alt="Contact Button" in the previous line

Upvotes: 0

JohnP
JohnP

Reputation: 50019

You're missing the '#' in your selectors

$(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");
    });
});

Upvotes: 2

Related Questions