jquery - jquery 在多个悬停时显示相同的 div

Question

我有几个相同类的 div，我想在它们中的任何一个悬停时显示相同的 div。我只想创建第二个 div 一次。我尝试在文档中创建它，然后在需要时克隆并附加它。这是行不通的。在下面的示例中，我的 main_item 是悬停在上面的类，而 optionbar 是要显示的 div。请注意，当您将鼠标悬停在任何 main_item 类上时，它的 ID 为 9999，而当您将鼠标悬停在其上时，该 ID 将被删除。

$(function(){
    $(".main_item").hover(function(){
     $('.optionbar').clone().appendTo("#9999");
    }
    ,function(){
         $("#9999").remove('.optionbar');
    }
);        
});

Answer 1

您将在此处找到工作示例。

代码示例：

$("div#test").hover(
   function () {
      $(this).append($("<div> ***</div>"));
    }, function () {
       $(this).find("div:last").remove();
    }
);​

Answer 2

试试这个：（Demo Here）

$(".main_item").hover(
   function() {
    $('.optionbar').show().appendTo(this);
}, function() {
    $('.optionbar').hide();
});​

希望这可以帮助！

Answer 3

不确定我是否抓住了，但你应该使用this你悬停的当前元素

$(function(){
    $(".main_item").bind('hover',function(){
     $('.optionbar').clone().appendTo(this);
     $(this).remove('.optionbar');

    });        
});

Answer 4

我不明白你为什么需要克隆它，只需移动它并根据需要显示/隐藏

$(function(){
    $(".main_item").hover(function()
    {
        $('.optionbar').show().appendTo(this);

    }, function()
    {
        $('.optionbar').hide();
    });
});

http://jsfiddle.net/trapper/F94Db/2/