CODEWITHSUNDEEP
javascriptjquerymouseover
DanCapitanDePlai
DanCapitanDePlai

Reputation: 457

JQuery: Show mouseover of subelement when parent element is mouseovered

How can i mouseover an img element [ so that it's ALT attribute to be shown ] when i mouseover a parent element ?

Example :

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('div.dorp').mouseover(function(){
        jQuery(this).find("img").mouseover();
    }).mouseout(function(){
        jQuery(this).find("img").mouseout();
    })
});
</script>

This code crashes my firefox webbrowser and i need to find a way to trigger img's alt attribute to be triggered when i mouseover the image's container which is considerably bigger than the image.

Upvotes: 0

Views: 308

Answers (1)

Jay
Jay

Reputation: 3531

Shouldn't it be

jQuery(this).find("img").mouseover(); ?

Mouseover is a method, not a property

And I'm assuming the stray j below that line is just a typo you made while writing the question, and not in your actual code.

Update:

Made a Fiddle

What's actually happening is that the mouseover event fires both on the div and the img. The mouseover event on the img bubbles back up to the div, which causes another mouseover on the img and so on in an infinite loop. My browser gives the error `Uncaught RangeError: Maximum call stack size exceeded'. This is probably what crashed your FF.

A solution for this (though ideally, I agree with the other posters, in that you should just use a tooltip plugin), is to add a mouseover event handler on the img too that stops propagation. However, this still doesn't solve your original need to get a tooltip on a child image.

Updated Fiddle

Upvotes: 1

Related Questions