CODEWITHSUNDEEP
jqueryhoverhideelement
qwerty
qwerty

Reputation: 5246

jQuery: Why in the world will this element not hide on hover?

This is getting really frustrating now!

I've created a script that appends some content from another page to the body when you hover a special link. I also set it up so that whenever i move the mouse away from the link, the new element (with the loaded content) hides. So far, so good. The problem is that sometimes when i move the cursor away from the link too fast, the script doesn't react (or something). Ah well, i thought, and just added this evil code that refuses to work:

$('#userBubble').mouseover(function() {
    $(this).hide();
});

Now, is there anything wrong with that? I've tried using mouseenter instead, but no luck with that either. I've also tried putting it inside a $(document).ready() function - no luck there either. #userBubble is the the container of the content loaded on hover, and the name is correct. I can console.log #userBubble, so it does in fact exist.

Any ideas what's messing this up? I get no errors, it just doesn't work.

Upvotes: 1

Views: 177

Answers (6)

DwB
DwB

Reputation: 38290

The following should work.


$(document).ready( function()
{
    $("#hoverHide").mouseover( function ()
    {
        $(this).hide();
    } );
} );

If that does not work, try this:


$(document).ready( function()
{
    $("#hoverHide").mouseover( function ()
    {
        $("#hoverHide").hide();
    } );
} );

If neither of those works, the it seems likely that you have a syntax error somewhere on your page. Perhaps in the .ready function declaration.

Upvotes: 0

Jason
Jason

Reputation: 11615

Make sure that user ID is unique in the DOM and that the element exists when you bind(or use live).

Change it to a class and use live. I bet it works.

<img id="userBubble" class="userBubble"/>

$('.userBubble').live("mouseover", function() {
    $(this).hide();
});

Upvotes: 2

Icid
Icid

Reputation: 1464

Have you tried this?

$('#userBubble').mouseover(function(event) {

        $(event.target).hide();

});

EDIT: Ohw, didn't quite read your question well.
Like Spiny Norman said, you have to use 'live' or 'delegate' ; )

Upvotes: 0

dheerosaur
dheerosaur

Reputation: 15172

It worked with hover

$('#userBubble').hover(function() {
    $(this).hide();
});

http://jsfiddle.net/2n2kJ/

Upvotes: 0

stian.net
stian.net

Reputation: 3963

make sure you have loaded the html-div before you set the event:

 <!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>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#test').mouseover(function () { $(this).hide(); })
        });
    </script>
</head>
<body>
    <div id="test">This will hide!</div>
</body>
</html>

Upvotes: 0

Spiny Norman
Spiny Norman

Reputation: 8327

This is probably because the element does not yet exist when you add the handler. Try

$('#userBubble').live('mouseover', function() {
   $(this).hide();
});

instead.

Upvotes: 2

Related Questions