hover div to appear text in jquery issue

Question

I have a problem here. When my mouse hover over a div, a text appear in the div. And when it is on mouseout from the div, the text will disappear. My problem is however when the mouse is over the appeared text, it will treat that it is mouseout from the div, causing the text to disappear. How can i do to avoid that? I want the text to remain as long the mouse is in the div even though it is above the text. Thanks..

<div class="passd"></div>

    $('.passd').live("mouseover", function(){
  if($(this).children('#passopt').length==0){
   $(this).append('<p id="passopt">appear text</p>');
  }
 });
 $('.passd').live("mouseout", function(){
  $(this).children('#passopt').remove();
 });

i got the problem , we can achieve what you want by using some boolean true or false, but that isnot good approach , let me think and get back... — kobe
– kobe, Commented Dec 4, 2010 at 20:51

RabidFire · Accepted Answer · 2010-12-04 20:53:43Z

2

Try this:

$('.passd')
    .live("mouseenter", function() {
        $(this).append('<p id="passopt">appear text</p>');
    })
    .live("mouseleave", function() {
        $(this).children('#passopt').remove();
    });

Tested, and works: http://jsfiddle.net/xLzdP/

answered Dec 4, 2010 at 20:53

RabidFire

6,3401 gold badge30 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

momo · Accepted Answer · 2010-12-04 20:47:03Z

1

you could use the mouseleave event instead...

http://api.jquery.com/mouseleave/

answered Dec 4, 2010 at 20:47

momo

3,9454 gold badges36 silver badges55 bronze badges

1 Comment

kobe Over a year ago

+1 for you gave the soloution , but you would have given some code also , so people like it..

DGM · Accepted Answer · 2010-12-04 20:48:54Z

0

Check out http://flowplayer.org/tools/tooltip/index.html to see if it can do what you want...

answered Dec 4, 2010 at 20:48

DGM

27.1k7 gold badges65 silver badges82 bronze badges

2 Comments

kobe Over a year ago

the problem he is having is mouseover of text is treating as mouseout of div so its hiding the text , we can use the plugin , but we should see how to fix his problem.

DGM Over a year ago

sometimes the solution is to use a tool that already has it solved. :)

bozdoz · Accepted Answer · 2010-12-04 21:03:49Z

0

You could achieve just as much with using .hover():

    $('.passd').hover(function() {
        $(this).append('<p id="passopt">appear text</p>');
}, function(){
        $(this).children('#passopt').remove();
    });

answered Dec 4, 2010 at 21:03

bozdoz

12.9k8 gold badges74 silver badges100 bronze badges

Collectives™ on Stack Overflow

hover div to appear text in jquery issue

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related