javascript - 在变量 jquery 中运行 .hover()

Question

我只是想写一些这样的代码：

var clickAction = function(){
    $('#OL_Icon_55').append("<em class='well'>Hello World</em>");
}
$("body").one("mouseenter",clickAction);

我想Hello World在鼠标悬停时隐藏字符串#OL_Icon_55，而不是代码如下所示：

var clickAction = function(){
    $('#OL_Icon_55').append("<em class='well'>Hello World</em>", function() {
        $(this).hover(function () {
            $(".well").hide();
        });
    });
}
$("body").one("mouseenter",clickAction);

但这对我不起作用。有没有人有更多的想法或更正该代码以便悬停功能可以工作？

Answer 1

看看这个小提琴。

如果鼠标在里面，将显示“Hello World” #OL_Icon_55。

这是JS：

var $OL = $('#OL_Icon_55'),
    $span = $("<span class='well'>Hello World</span>");

$("body").one("mouseenter", function() {
    $OL.append($span);
});

$OL.mouseenter(function () {
    $span.show();
}).mouseout(function () {
    $span.hide();
});                               

Answer 2

从@depot 窃取了大部分代码。但要短得多

$(function(){  // <-- on dom ready
    var $OL = $('#OL_Icon_55'),
    $span = $("<span class='well'>Hello World</span>");  

    $("body").one("mouseenter", function() {  // <-- on one mouse enter
        $OL.append($span);  // <-- append span
    });

    $OL.hover(function () {  // <-- on hover
        $span.toggle();  // <-- toggle (show/hide) span
    });   
});       

http://jsfiddle.net/EeGYs/3/