Question

I have a div which shows count like this:

How can I change the text from 0 to any word for example, when mouse is over the div, and revert to 0 when mouse leaves.

I tried this code, but it didn’t work.

$('.post-fav a').bind('mouseenter',function() {
    var default_text = $(this).text();
    $(this).css({'background-position' : 'left bottom', 'color' : '#1871a4'});
    $(this).html('<?php _e('favorite','deluxe'); ?>');
});
$('.post-fav a').bind('mouseleave',function() {
    $(this).css({'background-position' : 'left top', 'color' : '#666'});
    $(this).text(default_text);
});

The default text is variable, each element has specific count, I need someway to store the initial count when mouse moves over ..I can’t hard code it in js as 0 or any other count.

Answer 1

You just need to use the hover function, the first parameter is mouseover, the second is mouseout:

$('div').hover(
    function() { $(this).html('anyword'); },
    function() { $(this).html('0'); }
);

EDIT:

var storedtext;
$('div').hover(
    function() { 
        storedtext = $(this).html();
        $(this).html('anyword'); 
    },
    function() { $(this).html(storedtext); }
);