CODEWITHSUNDEEP
javascriptjquery
steo
steo

Reputation: 4656

Showing on mouseover a div created dynamically and remove

I searched a lot through questions but I did not find the right way. My problem is: I want to create a div dynamically , showing it on mouseover appending it to another div, and remove (through remove() function) on mouseout. I tried couple ways but in any of them , sometimes the div shows up and then disappear, sometimes it doesnt, sometimes it disappear when my mouse goes away from the text in the container div. Thank you 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();
});

Upvotes: 4

Views: 2215

Answers (3)

steo
steo

Reputation: 4656

I solved my problem using :

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

Code 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; }

Upvotes: 1

steo
steo

Reputation: 4656

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>

Upvotes: 0

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

Does this help:

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

Upvotes: 1

Related Questions