javascript - jquery 悬停气泡导致循环闪烁效果

Question

我有冒泡的问题(我认为)

我有意见

悬停时，我将带有点击事件的 div 附加到输入的父级，第二个悬停功能是删除所述附加的 div。

问题是，由于叠加层位于我附加到的 div 之上，当鼠标悬停在叠加层上时，会调用鼠标移出函数，然后触发鼠标悬停......等等等等。

http://jsfiddle.net/N7FFB/

var clear = $('<div class="keyword-clear-icon">').css({
                left            : $('#searchtext').width() - 20,
            }).attr('title','Clear');

$("#dashboard-searchbox #searchtext").hover(
    function(){
        $(clear).click(function(){
            $("input#searchtext").val('');
        });
        $('#dashboard-searchbox').append(clear);
    },
    function(){
       $('#dashboard-searchbox').find('.keyword-clear-icon').remove();
    }
);

有没有一种标准的方法可以实现这种效果？

Answer 1

只需将鼠标悬停在 #dashboard-searchbox 容器上即可。

http://jsfiddle.net/N7FFB/2/

Javascript

$("#dashboard-searchbox").hover(
    function(){
        $(clear).click(function(){
            $("input#searchtext").val('');
        });
        $('#dashboard-searchbox').append(clear);
    },
    function(){
       $('#dashboard-searchbox').find('.keyword-clear-icon').remove();
    }
);