javascript - 在鼠标悬停时显示动态创建的 div 并删除

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>