jquery mouseenter mouse leave

Question

I am having trouble getting the moues enter mouse leave functionality work. I know there is a .hover option I can take, I want to get the mouseenter/mouseleave working before i go up to that.

What i am seeing is, I have chrome opened up and am inspecting the img, it says that the src file is changing but i am not seeing a noticable change. Can someone help please

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery-1.4.3.min.js" type="text/javascript"></script>


</head>
<body>

            <img id="menuHome" src="m_home.gif" />
                <script type="text/javascript">

                    $(document).ready(function() {
                        $("#menuHome").mouseenter(function() {
                            $(this).attr({ src: 'm_home_roll.gif' });
                        });
                        $("#menuHome").mouseleave(function() {
                            $(this).attr({ src: 'm_home.gif' });
                        });
                    });
    </script>

</body>
</html>

Does chrome sent a http request to load the image? And are you sure the images are different? — Mark Baijens, Nov 11 '10 at 20:33
100% sure images are different, on the resources tab after the initial rollover chrome does request the m_home_roll.gif — , Nov 11 '10 at 20:35
THe first time i Rollover the image it changes, but subsequent times it doesn't. If i refresh the page i can get the image to change but again, subsequent times it will not change. — , Nov 11 '10 at 20:42
Might it be possible that these events are getting cleared out when you change the source? Just for sanity sake, try rebinding the events after the src is loaded. — shoebox639, Nov 11 '10 at 20:47
Pretty new to jquery here, how would i go about rebinding after the source changes? — , Nov 11 '10 at 20:49
the same thing happens when I try to use the hover event. It works the first time in chrome, but no other time. And it works perfectly in ie and firefox. Code below $("#menuHome").hover( function() { $(this).attr({ src: 'm_home_roll.gif' }); } ,function(){ $(this).attr({ src: 'm_home.gif' }); }); }); — , Nov 11 '10 at 20:55
From what I can tell from your code, it looks like your trying to do a simple image rollover. You should consider using CSS sprites for this as it is a) faster and b) works with javascript disabled. http://www.alistapart.com/articles/sprites — dmackerman, Nov 11 '10 at 20:58
I chose not do a sprite because i wanted to play with jquery. I assume i can go and plug a css sprite in and that would work, but i am really curious as to why this itself isnt working. Does anyone else have this problem with the code above? — , Nov 11 '10 at 21:01
Yes! Using Chrome, this has happened to me as well. But, I still have no idea why. I hear Chrome has some pretty annoying cache issues for developers. Hopefully someone will have a solution. — Stephen Watkins, Nov 11 '10 at 21:20
Actually when you say the first time you roll over it changes. Does that mean first time you enter it changes AND leave it changes back or just first enter? — shoebox639, Nov 11 '10 at 21:46
Since it looks like nobody can reproduce this behaviour, is it possible to provide a working demonstration of this bug? — Dr.Molle, Nov 12 '10 at 01:45

score 1 · Answer 1 · answered Nov 17 '10 at 11:57

1

I had a similar problem with Chrome I think, I seem to remember using mouseover and mouseout instead. So something like this:

$(document.ready(function() {
    $('#menuHome')
        .mouseover(function() {
            $(this).attr({src: 'm_home_roll.gif'});
        })
        .mouseout(function() {
            $(this).attr({src: 'm_home.gif'});
        });
});

There is also no need to select the element twice (hence the single $('#menuHome') line).

answered Nov 17 '10 at 11:57

Marcus Whybrow

19,578
9
70
90

Yes, it looks to me like `mouseenter` and `mouseleave` may be specific to Internet Explorer: http://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and-mouseenter-events – Tom Jan 12 '11 at 02:24

score 0 · Answer 2 · answered Nov 11 '10 at 20:57

0

This probably isn't the reason but could you try this with slightly different syntax?

$(document).ready(function() {
    $("#menuHome").hover(function() {
        this.src = 'm_home_roll.gif';
    }, function() {
        this.src = 'm_home.gif';
    });
});

answered Nov 11 '10 at 20:57

lonesomeday

233,373
50
316
318

tried with the different syntax and didnt help. I like this sytanx better. Why did you not have to include the $(this) ? – Nov 11 '10 at 21:00
2

@george9170 Inside a handler function, `this` refers to the DOM element. You can perform jQuery actions on it by wrapping it in `$()`, but you can access normal Javascript element methods and properties on `this`. This will always have better performance. – lonesomeday Nov 11 '10 at 21:02

score 0 · Answer 3 · answered Nov 11 '10 at 20:59

0

If you're certain the uri of those images is correct AND that you're waiting an appropriate amount of time to load them when you roll over / roll off (the first time, usually they cache after that) then switch $(document).ready() to $(window).load() and see if it works better?

answered Nov 11 '10 at 20:59

Anthony Corbelli

877
4
10

$(window).load()seems to have the same behavior $(window).load( function() { $("#menuHome").hover(function() { this.src = 'm_home_roll.gif'; }, function() { this.src = 'm_home.gif'; }); }); anyone else having this issue with the code above? – Nov 11 '10 at 21:05

score 0 · Answer 4 · answered Nov 11 '10 at 21:34

Since no one has explored this, I'll venture a guess. As I commented to the OP, it might have something to do with the events getting unbind after you change source. To verify this, you can put a break point or put an alert statement in both events. Whenever you rollover and there's no alert popping up, that means your events are getting unbound somehow.

Given that, try:

$(document).ready(function() {
    $("#menuHome").live('mouseenter', function() {
        $(this).attr({ src: 'm_home_roll.gif' });
    });
    $("#menuHome").live('mouseleave', function() {
        $(this).attr({ src: 'm_home.gif' });
    });
});

to see if it's readding the element to the DOM. If that doesn't work, try:

function enter() {
    $(this).attr({ src: 'm_home_roll.gif' });
    readd();
}
function leave() {
    $(this).attr({ src: 'm_home.gif' })
    readd();
}

// can't refer to function handler while inside function
function readd(elem) {
    $('#menuHome').unbind().mousenter(enter).mouseleave(leave);
}

$(document).ready(function() {
    $("#menuHome").mouseenter(enter).mouseleave(leave);
});

A nicer way to test this would be using `delegate`: $(document.body).delegate('#menuHome', 'mouseenter', function(){this.src='m_home_roll.gif';}).delegate('#menuHome', 'mouseleave', function(){this.src='m_home.gif';});` — lonesomeday, Nov 11 '10 at 21:39
lol I had to look up the difference of live and delegate. I believe that they are both valid here. — shoebox639, Nov 11 '10 at 21:52

score 0 · Answer 5 · answered Nov 17 '10 at 20:02

I don't know if you are open to a code structure change, but I would code something like the following:

<script type="text/javascript">
$(document).ready(function(){`
    $('#rolloverImg').html("<img src=\"...\">");`

    $('#rolloverImg').hover(function(event){
       $(this).html("<img src=\"...new src...\">");
    }, function(event){
       $(this).html("<img src=\"...old src...\">");
    });
});
</script>

....
<div id="rolloverImg"></div>

jquery mouseenter mouse leave

5 Answers5