Ahah, now you are delving a bit deeper. This is where things get a bit tricky.
What you want to do is add a "return false;" to your mouseover event handler.
This is to stop what is known as "event bubbling", that is to say, an event
which occurs on an inner element will propagate up through the DOM, and any
other event handlers will be triggered.
NOW, I've found that if you use the hover method, returning false will not stop
the event bubbling. In these cases I had to break out my mouse events into
mouseover and mouseout.
So, suppose you have something like:
<div id="1">
<div id="2">
hello!
</div>
</div>
And you have mouseover handlers for both #1 and #2.
You might do something like:
$("#2").mouseover(function() {
dosomething();
return false;
});
This will stop your div#1 from receiving the mouseover event while the mouse is
within div#2. I believe this basic approach of returning false will work for
all the mouse events, but for whatever reason (I'm sure there's a good one) it
won't work in the hover method.
I didn't follow your example entirely, but it sounds like something like this
is occurring.
-- Josh
----- Original Message -----
From: Mitchell Waite
To: jquery-en@googlegroups.com
Sent: Thursday, July 26, 2007 3:05 PM
Subject: [jQuery] Boggles the mind - mousevoer and mouseout together
Imagine this
When a user moves the mouse over a certain div (mouseover) on your page you
want to do some things
1. fadeOut a graphic in that div to 50%
2. Make a button in that div appear (show)
3. Manipulate the button's 3 states (my wonderful 3 state button gizmo)
4. When the user clicks the mouse call function A and reverse the above,
fadeIn the graphic back to 100%, hide the button.
5. If the user moves the mouse out of the div area (mouseout) then reverse
the above, fadeIn the graphic back to 100%, hide the button.
Sounds easy right? Well it's not. Why?
Because of the way jQuery queues up the events, the a mouseover and a
mouseout events interact in such a way that the whole process goes bananas,
there is a great deal of flickering of the graphics when you move the mouse
because it is sending mouseover messages.
What I need to do is to have it act more like hover, which avoids these
issues. Except for one problem. I am using a button over the graphic that uses
hover also. So the two processes fight eachother.
I need a way to say
jQuery - I need you to do something a bit different.
Respond to my mouseover as usual but then don't look at mouseover for a while.
That way I could process the other events.
Any ideas on how to do this. I thought perhaps using a call back would help
but that seems to just let me control one thing finishing before another starts
which is not my issue.
Thanks
Mitch
