[animedude123]

Hey,

I currently have this (Using jQuery):

<div>
	<div class="imgNav" id="info1" onmouseout='$("#info1").hide(); $("#img1").show();'>
		<p>Stuff</p>
		<p><a href="#">Enlarge</a></p>
	</div>
	<span id="img1" onmouseover='$("#info1").fadeIn(); $("#img1").hide();'><img src="images/thumbs/image.png" /></span>
</div>

My problem is that when I hover over info1 and one of its sub elements (p or a), it activates the onmouseout effect. Only though when I cross that invisable box line that surrounds them.

So the effect is this constant mouseover/mouseout effect when I hover over the sub elements (Once I hover over the sub elements, img1 shows, but then I mouseover that so info1 starts to show).

Anyone know how to fix this?

Thanks in advance for any help!

[BetaWar]

Moved to jQuery.

[animedude123]

Hmm, ok.

Its not really a jQuery problem though (I just wanted to let people know the effects were used with jQuery).

The real problem is with the generic onmouseover/out and the sub elements (I think so at least).

[animedude123]

Ok, so I sorta got a fix. It seems to work fine, but I was hoping for a way that didn't require more javascript (I'm already using a lot).

Fix was found here: http://webmaster-for...hread.php?t=854

[tabib_m]

animedude123, on 07 June 2009 - 05:43 PM, said:

Hey,

I currently have this (Using jQuery):

<div>
	<div class="imgNav" id="info1" onmouseout='$("#info1").hide(); $("#img1").show();'>
		<p>Stuff</p>
		<p><a href="#">Enlarge</a></p>
	</div>
	<span id="img1" onmouseover='$("#info1").fadeIn(); $("#img1").hide();'><img src="images/thumbs/image.png" /></span>
</div>

My problem is that when I hover over info1 and one of its sub elements (p or a), it activates the onmouseout effect. Only though when I cross that invisable box line that surrounds them.

So the effect is this constant mouseover/mouseout effect when I hover over the sub elements (Once I hover over the sub elements, img1 shows, but then I mouseover that so info1 starts to show).

Anyone know how to fix this?

Thanks in advance for any help!

Hi,
You can use .mouseleave() method in jQuery: http://api.jquery.com/mouseleave