Hovering display created dynamically and deleting

Question

I searched a lot for questions, but I did not find the right path. My problem: I want to dynamically create a div , showing it on a mouseover , adding it to another div and removing (via the remove() function) on mouseout . I tried a couple of ways, but in any of them, sometimes a div appears and then disappears, sometimes it's not, sometimes it disappears when my mouse leaves the text in the div container. Thanks guys.

This is my code.

  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

Does it help:

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

Answer 2

I solved my problem using:

This html code:

  <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 code:

 $("#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

This is html:

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