JQuery hover event fired twice over mouse

Question

I am trying to temporarily change the content divto hover using this jQuery:

$(document).ready( function() {
    var $ratingHtml = '';
    $('.userRating').hover(
        function() {
            $ratingHtml = $(this).html();
            alert($ratingHtml);
            $(this).html( 'Log in to rate' );
        },
        function() {
            alert($ratingHtml);
            $(this).html( $ratingHtml );            
        }
    );
});

However, when you hover, a warning appears twice - first for the original HTML content, and then for the "Sign in to rate" line. It looks like the second mouseover event is happening. How can I get around this?

Answer 1

I decided to go with another solution - adding text to the overlay:

$('.userRating').hover(
    function() {
        $('<div class="loginMsg">Log in to rate</div>').appendTo('.userRating');
    },
    function() {
        $('.loginMsg').remove();
    }
);

With appropriate styles in CSS.

Answer 2

I think this is due to the spread of the event. See these links on how to avoid this:

How to stop event propagation using the onclick built-in attribute?

http://snipplr.com/view/2810/stop-event-propagation-stop-an-event-from-bubbling-up/

Answer 3

this question has already been asked and answered here @ stackoverflow.com ....

you can use this jQuery plugin ... It will help you with freezing ...