Mouseenter Hover Div Show/Hide

Question

I'm trying to get my function to work with no success. All I need is to be able to scroll onto my div and for the X to show up and then I can add my wanted effects afterwards.

I'm using Javascript as I need it cross browser compatible. I don't want to use CSS as its very limited in what I would like to add in the future.

<script>
$(document).ready(function() {
$('div.userinfo').hover({
    mouseenter: function() {
        $(this).children('div.delete').show();
    },
    mouseleave: function() {
        $(this).children('div.delete').hide();

    }
    });
    });
</script>
    <?
echo "<div class='userinfo'><div class='delete' style='cursor:pointer;position:relative;top:0px;float:right;padding-right:5px;' onclick=\"delete_('".$streamitem_data['streamitem_id']."');\">X</div></div>"

Answer 1

Instead of .hover(), which is deprecated and doesnt work like you try to use it, use .on():

$(function() {
    $('div.userinfo').on({
        mouseenter: function() {
            $(this).children('div.delete').show();
        },
        mouseleave: function() {
            $(this).children('div.delete').hide();

        }
    });
});

This will do the job.

Answer 2

Use bind() method instead of hover:

$(document).ready(function() {
   $('div.userinfo').bind({
     mouseenter: function() {
        $(this).children('div.delete').show();
     },
     mouseleave: function() {
        $(this).children('div.delete').hide();
     }
   });
});

Note: If you are adding new dom elements later with jQuery, use live() or on() , if you are not, use bind method which is really solid way.