Question

我通过问题搜索了很多，但我找不到正确的方法。我的问题是：我想动态创建div，将其显示在mouseover上，将其附加到另一个div，并在remove()上删除（通过mouseout功能） }。我尝试了几种方法，但在其中任何一种方式中，有时候div会显示然后消失，有时它不会消失，有时当我的鼠标离开容器div中的文本时它会消失。谢谢你们。

这是我的代码

    var usr = 'username_pre';

var newdiv = $('<div>', { 
              html: '<a href="#" title="">'+usr+'</a> </br> <a href="#" title="">impostazioni</a> </br> <a href="#" title="">esci</a>'
              });


$("#container").mouseover(function(){
        $("#options").css('visibility','visible').append(newdiv);
    }); 
$("#options").mouseout(function(){
         $(newdiv).remove();
});

Answer 1

这有用吗：

$("#container").mouseover(function(){
        $("#options").css('display','block').append(newdiv);
    }); 
$("#options").mouseout(function(){
    $("#options").css('display','none');
    $(newdiv).remove();
});

Answer 2

我使用以下方法解决了我的问题：

此代码html：

  <div id="container" class="cont">
  <a href="#" id="username" class="nomeutente" title=""> Stefano Imparato </a>
  </div>
  <div id="options" >
  <a href="#" id="user" title="">usr</a> </br>
  <a href="#" title="">impostazioni</a> </br>
  <a href="#" title="">esci</a> 
  </div>

代码jquery：

$("#container").mouseover(function(){   
        $("#container").append($("#options"));
        $("#options").css({
            'display' : 'block'
        });
        $(this).find('#user').text(usr);
    });

$("#container").mouseout(function(){
    $("#options").css('display','none');
});

css：

#option { display: none; }

Answer 3

这是html：

<div id="container" class="cont">
<a href="#" id="username" class="nomeutente" title=""> Stefano Imparato </a>
<div id="options" class="opt"></div>
</div>

在mouseover上显示动态创建的div并删除

这是我的代码

3 个答案: