javascript - 如何正确捕捉 mouseout 事件？

Question

我有以下代码：

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

以下是 mouseover/mouseout 事件的代码：

            $('.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');
            });

我想将简单的文本转换为输入字段并返回。但是有一个小问题：当我将光标移动到一个新字段上（不要从它移出）然后这个字段转换为简单的文本并返回很多次，但我没有从它移出，我不明白这是怎么回事。请告诉我。先感谢您。

Answer 1

$("element").hover(
  function () {
        hover code
  }, 
  function () {
     hover out code.
  }
);

如果您遇到问题，只需修改您的代码...

Answer 2

JSFiddle 代码示例

$('.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');
});

Answer 3

这是工作小提琴：http: //jsfiddle.net/surendraVsingh/vvbnE/

jQuery代码：

 $('.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');
 });

Answer 4

尝试这个

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

演示。