javascript - Any HTML tags inside of tooltip cause basic tooltip to close on hover -


I am new to jQuery, in fact any kind of AJAX / JavaScript (though new for PHP xHTML and CSS No) . Anyways, I'm trying to achieve a "tooltip-like" effect, where I can hover on a div ... the new div fades up and then when I fade out "tooltip" from the div.

So here's the basic jQuery I've been able to scrap to read odd guides here and there:

  $ (function () {$ ('# sn -not-logged-in ') .hor (function () {$ (' # sn-not-logged-in-hover '). FadeIn (' medium ');}); $ (' # sn-not-logged -in-hover ') .mouseout (function () {$ (' # sn-not-logged-in-hover '). FadeOut (' medium ');});});  

The problem is that if I put the "any" html tag inside that div, on the other hand you roll it over the div fleds

How can any ideas be decided?

Cheers

updated for comments

Just switch your event to mouseleave instead of mouseover and hoswar instead of mousester will fix the problem for your markup. , Such as:

  $ (function () {$ ('# sn-not-logged-in'). Mousecenter (function () {$ ('# sn-not-logged-in FadeIn ('medium');}); $ ('Sn-not-logged-in-hover'). Mouseleave (function () {$ ('# sn-not-logged-in-hover' ). FadeOut ('Medium');});});  

Previous Answer

Change slightly above, such as:

  $ (function () {$ ('# Sno-logged-in '). Hover (function () {$ (' # sn-not-logged-in-hover '). FadeIn (' medium ');}, function () {$ (' Sn -not-logged-in-hover '). FadeOut (' medium ');});}); Implemented on   

mousecenter and mouseleave (which provide you the first and second functions, respectively), so it's FadeIn () overlap with little beforehand

However, even by entering a child , mousecenter If you do not use .hover () then your existing problem is currently causing ... inside & lt; Img & gt; There will be no problem moving the mouse over the tag :)


Comments