How to change 'hover' function to 'on' function?
<p>I need to use 'on' function instead of 'hover'. It's old code:</p>

<pre><code>        $('.field').hover(
        function() 
        {
            old_value=$(this).text();
            item_id=$(this).attr('id');
            item=$(this).parent('td');
            new_value=(old_value=='Not translated') ? '' : old_value;

            $(this).empty(); 
            var field="&lt;div id='save_button' class='btn btn-primary' style='float: right' href='#'&gt;Save&lt;/div&gt;&lt;form&gt;"+
                "&lt;div style='overflow: hidden; padding-right: .5em;'&gt;"+
                "&lt;input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/&gt;&lt;/div&gt;&lt;/form&gt;";
            $(this).html(field);
        },
        function() 
        {

            $(this).empty();
            $(this).html(old_value);
        });
</code></pre>

<p>And it's new code:</p>

<pre><code>        $('.field').on('hover',
        function(event) 
        {
            old_value=$(this).text();
            item_id=$(this).attr('id');
            item=$(this).parent('td');
            new_value=(old_value=='Not translated') ? '' : old_value;

            $(this).empty(); 
            var field="&lt;div id='save_button' class='btn btn-primary' style='float: right' href='#'&gt;Save&lt;/div&gt;&lt;form&gt;"+
                "&lt;div style='overflow: hidden; padding-right: .5em;'&gt;"+
                "&lt;input id='new_value' type='textarea' name='term' style='width: 100%;' value='"+new_value+"'/&gt;&lt;/div&gt;&lt;/form&gt;";
            $(this).html(field);
        },
        function(event) 
        {

            $(this).empty();
            $(this).html(old_value);
        });
</code></pre>

<p>Old code works good, but new one doesn't work (only mouseout function works). Please, tell me, where have I made a mistake? Thank you. </p>
