Изменение текста onhover с помощью jQuery

Question

У меня есть div с текстом «один» внутри него. Когда вы наводите на него курсор, я хочу изменить текст на «два», и когда вы перестанете нависнуть над ним, я хочу изменить текст на «один». Я попытался сделать это с помощью jQuery, но после того, как он изменился на «два», он не изменится на «один», как только вы перестанете зависать над ним. Что я делаю не так?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $("p").hover(function(){ 
     $(this).replaceWith("two"); 
     }, function(){ 
     $(this).replaceWith("one"); 
    }); 
}); 
</script> 

<p>one</p> 

Answer 1

Использование text(), поскольку replaceWith() заменит весь элемент, а вы заменяете его с текстом, а не элемент, так что выбор элемента теряется в следующий раз.

$(document).ready(function(){ 
 
    $("p").hover(function(){ 
 
     $(this).text("two"); 
 
     }, function(){ 
 
     $(this).text("one"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 

 
<p>one</p>

Answer 2

$(document).ready(function(){ 
 
    $("p").hover(function(){ 
 
     $(this).html("two"); 
 
     }, function(){ 
 
     $(this).html("one"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 

 
<p>one</p>