Replacing div html like toggle

Question

I have a div and i want to replace its html on hover, but on hover back i want to replace it back to it previous html. (like toggle...)

code:

<div class="container">
    <div class="inner first">Hello</div>
    <div class="inner second">And</div>
    <div class="inner third">Goodbye</div>
</div>

i try this

$(".inner").mouseover(function() {
    var tmpX = $(this).html();
    $(this).html("xxxxxxxxxxxx");
}).mouseout(function() {
    $(this).html(tmp);
});

Thanks

Answer 1

You need to make the tmpX variable as global

var tmpX;
$(".inner").mouseover(function() {
    tmpX = $(this).html();
    $(this).html("xxxxxxxxxxxx");
}).mouseout(function() {
    $(this).html(tmpX);
});

Fiddle