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

看看这个fiddle。

如果鼠标位于#OL_Icon_55内，将显示“Hello World”。

这是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/

在变量jquery中运行.hover（）

2 个答案: