3

I searched already and somehow I didn't find a matching question .. o.O

Now, i got two divs, "div 1" and the other one is hidden ("submenu"). Now if I hover over div 1, the submenu appears just next to the div, which is correct. But if I move my mouse to the submenu, it disappears.

It's because I got a hover trigger on div 1.

If I split in into mouson and mouseout, is it somehow possible to say 'submenu must be closed when mouseout, but ONLY if the cursor is not on the submenu'?

Thanks for help!

Flo

Florian Müller
  • 7,448
  • 25
  • 78
  • 120
  • See this answer: http://stackoverflow.com/questions/7006504/need-assistance-on-script-jquery/7048105#7048105 – Mikey G Aug 16 '11 at 22:22
  • @Mikey G, hell, you are right! This solved my problem! You may write an answer so I can mark it as correct, please :) – Florian Müller Aug 16 '11 at 22:28

2 Answers2

11

The trick requires two things:

  1. A parent div that wraps both the initial menu (div 1) and the second menu (submenu)
  2. Use the .mouseleave() method, NOT .mouseout() -- and bind this to the parent div mentioned in #1

jsFiddle example

You don't want to use mouseout(), because that will fire as soon as the cursor goes over the second menu, since this essentially "blocks" it from being over the parent div. mouseleave(), on the other hand, will only fire once the cursor is no longer over either the parent div, or any of it's children.

maxedison
  • 17,243
  • 14
  • 67
  • 114
  • Well, I just solved it by using on the parent div event "hover", this also works fine to me .... and I didn't really mean mouseout, I just did not know the exact name but I wanted you all to understand me what I meant ^^ but thanks! – Florian Müller Aug 16 '11 at 22:31
  • Yes, that's a better solution. .hover() uses mouseenter() & mouseleave(), as opposed to mouseover() & mouseout(), which is critical as I explained in my response. – maxedison Aug 17 '11 at 12:29
0

If you don't want animation, you can do it without JavaScript with the :hover selector like this.

Spycho
  • 7,698
  • 3
  • 34
  • 55