Question

I have following code:

<div class='no_translate'>Not translated</div>

And following code for mouseover/mouseout events:

            $('.no_translate').mouseover(function() {
                $(this).empty();
                var field="<form method='POST' action=''><input name='a' type='textarea'/></form>";
                $(this).html(field);
            });

            $('.no_translate').mouseout(function() {
                $(this).empty();
                $(this).html('Not translated');
            });

I want to transform simple text to input field and back. But there is a little problem: when I move my cursor on a new field (don’t out from it) then this field transform to simple text and back many times, but I don’t out from it and I don’t understand what’s going on. Please, tell me. Thank you in advance.

Answer 1

JSFiddle code example

$('.no_translate').hover(function() 
{
    $(this).empty();
    var field="<form method='POST' action=''><input name='a' type='textarea'/></form>";
    $(this).html(field);
},
function() 
{
    $(this).empty();
    $(this).html('Not translated');
});