Question

I have a problem in my code, when I hover over the image, the image will become 50% larger and it will display a text over the image, but when I hover over the text, the image will enter the state of mouseout, mouseover, mouseout, mouseover. So it will flicker a lot. How can I disable this hovering event when the mouse is over the text of the image? I tried event.stopPropagation in the text but it isn’t working.

Here’s the jsFiddle. Try to hover over the image, then try to hover over the text. That’s the effect I’m talking about. I want to disable the text hover event. Please help me.

Answer 1

I found out the solution for this,

I would do something like this. Instead of using the hover effect on
the img element, do it on the parent, the $(‘.imgwall’) and then to
increase just the image do a $(this).find(‘img’). and
$(this).find(‘h2’).show()/hide() to show the text inside the hover
event.

Thanks for looking!