The site has a block:

<div id="is"> <a href="#">Показать блок</a> <span id="box" style="display: none"> <a href="#">ссылка</a> <a href="#">ссылка</a> <a href="#">ссылка</a> </span> </div>

the problem is that if you hover the mouse (the cursor) on a block with the "is" id, then a block appears with links (id = "box") and for this you write jQuery code:

 $("#is").mouseover(function(){ $('#box').show('slow'); }).mouseout(function() { $('#box').hide('slow'); });

The script works, but every time you hover on links that are in id = "box" - this block blinks, then it appears and disappears. How to make the script work according to the idea, if you hover on the id id = is " then the id =" box " block appears and when to remove the cursor from the id block = the" id = "box" block disappears ..?

Thank you for attention!



    1 answer 1

    It is easier to do on css:

     #is #box { display: none; } #is:hover #box { display: inline; }

    http://jsfiddle.net/oceog/vzenW/

    but on js:

    Js:

     var box = $('#box'); var is = $('#is'); $('#is a').mouseover(box_show); $(is).mouseout(box_hide); function box_show() { box.show('slow'); } function box_hide(e) { if (is.css('cursor')=='text') return; box.stop(); box.hide('slow'); }

    CSS:

     #is #box { display: none; } #is:hover { cursor: text; }

    the trick here is to put some css attribute invisible to the user to a previously known status when :hover , then when leaving the element, we check :hover in such a tricky way and, if the cursor is still in the block, then we don’t hide .

    http://jsfiddle.net/oceog/p6LX7/

    ps: in order not to twitch the block, use fadeOut('slow') instead of hide('slow')

    • Thank you for your attention! Understood and understood all the errors. Thank. - Maqsood