How to disable the hover event when I hover over the text inside the image?

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.

you have written too much code for this simple thing – Jun 05 '12 at 05:33 — , Jun 05 '12 at 05:33
do you want something like yours but less complex – Jun 05 '12 at 06:39 — , Jun 05 '12 at 06:39

score 1 · Accepted Answer · answered Jun 05 '12 at 10:08

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!

answered Jun 05 '12 at 10:08

Kevin Lee

1,079
6
17
34

You should accept your solution as the Answer so this question is resolved. +1 for a good solution, that is also illustrated in this other [SO Answer](http://stackoverflow.com/a/10949913/1195891). – arttronics Jun 08 '12 at 20:53

score 0 · Answer 2 · answered Jun 05 '12 at 06:38

0

If you prevent hover event while inside the text box, the image reverts to the small size since it's only shown larger while hovering.

Preferably, you should hover over 1 single element, perchance the text-box with very large transparent borders to center it.

If you can, consider using a jQuery Zoom plugin. Configure the plugin so once your over the image, prior to magnifer the text-box is added.

answered Jun 05 '12 at 06:38

arttronics

9,957
2
26
62

is there any way to make it disable the hovering in the text box? – Kevin Lee Jun 05 '12 at 06:42
Not in a way that will retain the larger image because your markup is inside the `.hover()` event. Look at Answer from **Dipaks** on this page for example showing method that reverts to the smaller image once inside the text box. – arttronics Jun 05 '12 at 07:39

How to disable the hover event when I hover over the text inside the image?

2 Answers2