Question

In jQuery, how can I get text to toggle when the user hovers over an image?

I have code that changes the text when the user hovers:

# HTML
<table id="support-people">
<tr>
<td><img data-bio="Bio 1" src="person1.jpg" alt="Person 1"/></td>
<td><img data-bio="Bio 2" src="person2.jpg" alt="Person 2"/></td>
</tr>
<tr><td colspan="2">
<p id="support-person-description">Default text</p>
</td></tr></table>

# JS
$('#support-people img').hover(function(){
    $('#support-person-description').text(this.getAttribute("data-bio"));
});

But when the user moves away, the text stays the same – is there a neat way I can get it to toggle back to the original, default text?

Thanks.

Answer 1

Use the two functions of hover (first for mouse over, second for mouse out) then in the first save the oldtext as data on the element. Then read this value and set it in the second function:

$('#support-people img').hover(function(){
    var desc = $('#support-person-description');
    desc.data('oldtext', desc.text()).text(this.getAttribute("data-bio"));
}, function() {
    var desc = $('#support-person-description');
    desc.text(desc.data('oldtext'));
});