JQuery mouse

Question

JQuery mouse

I am having trouble getting moues to enter mouse functionality. I know that there is a .hover option that I can take, I want us to work with mouseenter / mouseleave before I approach this.

What I see, I open chrome and check img, it says that the src file is changing, but I do not see a noticeable 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>

+3

jquery .net

george9170 Nov 11 '10 at 20:29

source share

5 answers

Marcus whybrow · Answer 1 · 2010-11-17T11:57:13+0000

I had a similar issue with Chrome, I think I seem to remember using mouseoverand instead mouseout. 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'});
        });
});

Also, there is no need to select an element twice (hence the only line $('#menuHome')).

lonesomeday · Answer 2 · 2010-11-11T20:57:42+0000

, , ?

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

Anthony Corbelli · Answer 3 · 2010-11-11T20:59:47+0000

, , , / ( , , ), $(document).ready() $(window).load() , ?

shoebox639 · Answer 4 · 2010-11-11T21:34:32+0000

, . OP, - , . , . , , , , - .

, :

$(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 check if this element is reading the DOM. If this does not 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);
});

Rick rodriguez · Answer 5 · 2010-11-17T20:02:53+0000

I do not know if you are open to changing the structure of the code, but I would encode 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 mouse

More articles: