hover effect and function in jquery

Question

I have a goal <div class="outter"> and another <div class="inner"> as tooltip,

<div class="outter"></div>
<div class="inner"></div>

in default the tooltip is invisible , when I mouse hover on the "outter",the "inner" will appear in the "outter" one ,until mouse out the "outter" , the "inner" will disppear.

$(".outter").hover(function(){
   var $top=$(".outter").offset().top;
   var $left=$(".outter").offset().left;

   $('.inner').css({'top':$top+10+'px','left':$left+10+'px'}).show();
},function(){
    $('.inner').hide();
})

but when the mouse have not move out from the "outter" ,at the same time mouse on the "inner" in "outter",the problem happened: the inner one flashed, not stable

the online case here

So what's wrong with the case ?

I want the inner one would stable ,not the flashed.Please help,thank you:)

Nick Craver · Accepted Answer · 2010-12-10 10:36:04Z

2

If it's an option, the easiest solution is to use your elements like they're named:

<div class="outter">
  <div class="inner"></div>
</div>

...then your current code works fine, since the mouseleave won't trigger when entering the .inner element, since it's a child. You can test it here.

answered Dec 10, 2010 at 10:36

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

4 Comments

hh54188 Over a year ago

I know the "inner" in "outter" will solve the problem,but there are lots of div in my page,the tooltip will adapter to each div,so if each div has a tooltip, I think it is not good……

Nick Craver Over a year ago

@hh54188 - what's the issue with putting them inside? If you don't, you should at the very least rename the classes used :)

hh54188 Over a year ago

Putting them inside is no problem.What I mean is that each div in my page need a tooltip,and lots of them are common.So if I set a tooltip in each div,it a waste of html code……:)put you remind me ,I can use the "appendTo" to append to the div I need first,then execute the hover function……

Nick Craver Over a year ago

@hh54188 - yup, many ways to solve the uniqueness problem, I'm just unaware of all your constraints, your example is quite simplified :)

Chinmayee G · Accepted Answer · 2010-12-10 10:14:00Z

0

This might not be the ideal solution but try this one

$(".outter, .inner").hover(function(){
   var $top=$(".outter").offset().top;
   var $left=$(".outter").offset().left;

   $('.inner').css({'top':$top+10+'px','left':$left+10+'px'}).show();
},function(){
    $('.inner').hide();
})

updated demo

answered Dec 10, 2010 at 10:14

Chinmayee G

8,1172 gold badges34 silver badges41 bronze badges

Collectives™ on Stack Overflow

hover effect and function in jquery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related