Changing text on mouse over event

Change text of html element on mouseover and on mouseleave event it should show original message.

Example

<div id="message">
 Hi How are you
</div>

Hi How are you

</div>

$(document).ready(function() {
      $(document).on('mouseover', '#message', function(event) {
        event.preventDefault();
        $("#message").text("I am fine");
    }).on('mouseleave', '#message', function(event) {
        event.preventDefault();
        $("#message").text("Hi How are you");
    });
});

$(document).ready(function() {

$(document).on('mouseover', '#message', function(event) {

event.preventDefault();

$("#message").text("I am fine");

}).on('mouseleave', '#message', function(event) {

event.preventDefault();

$("#message").text("Hi How are you");

});

Output: