jQuery hover event firing twice on mouse over

Question

I'm trying to temporarily change the contents of a div on 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 on hover, the alert appears twice - first for the original HTML content, then again for the string 'Log in to rate'. It seems like a second mouseover event occurs. How can I work around this?

Answer 1

I think that is because of event propagation. See these links on how to avoid it:

http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute

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

Answer 2

I decided to go with a different solution - adding the text in an overlay:

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

With appropriate styles in the CSS.

Answer 3

this question was already asked and answered here @ stackoverflow.com....

you could make use of this jQuery plugin... It will help you with the hover...