Q:

jquery change text on image hover multiple changes

I'm trying to change text depending on which image a user hovers over. I've got that sorted but now I'm struggling with getting the text to return to it's default content. At the moment when you hover, the text changes to the desired text but after the hover, the text disappears? Please can someone tell me what I've done wrong.. 
My html
     <body>
<div id="container">
<img id="one" src="#" />
<li><img  id="two"  src="#" /></li>
<h2>Some Text</h2>
</div>
    </body>

my jquery
$(document).ready(function() {
    $('#one').hover(function() {
       $('h2').text('one');
     },function(){
       $('h2').text('');
 });
    $('#two').hover(function() {
       $('h2').text('two'); 
    },function(){
       $('h2').text('');

    });
});

jsfiddle...
http://jsfiddle.net/davidhudson/afdc9jL3/

A:

Try this : $('h2').text(''); this is clearing out your text after mouse out event. You can store the original text in some variable and set it when mouse out.
 $(document).ready(function() {
    //store original text
    var text=$('h2').text();
    $('#one').hover(function() {
       $('h2').text('one');
     },function(){
       //set original text
       $('h2').text(text);
 });
    $('#two').hover(function() {
       $('h2').text('two'); 
    },function(){
       //set original text
       $('h2').text(text);        
    });
});

DEMO
EDIT - as OP can reduce the script by using comma seperated jquery selectors because both (#one and #two) having same code for hover event. use below code
$(document).ready(function() {
    var text=$('h2').text();
    //comma seperated list of selector
    $('#one,#two').hover(function() {
       $('h2').text($(this).attr('id'));
     },function(){
       $('h2').text(text);
 });
});

DEMO with combined selectore

