CODEWITHSUNDEEP
jquery
Linens
Linens

Reputation: 7942

jQuery hover over part of an image

I have an image and a span overlapping the image. When I mouse over the image, the span pops up, and on mouse out it retreats back down.
Here is a simplified demo: http://jsfiddle.net/cCYHp/
The problem:
I would like the spans to only popup when the SPAN area is moused over, not the image. I tried to do a .hide() effect but it did not work (it is commented out in the demo). I think this is because once the span is hidden, it is not able to be moused over anymore. What is the correct way to achieve this effect?

Upvotes: 0

Views: 895

Answers (1)

ipopa
ipopa

Reputation: 1223

One possible solution: your toggling span put it in another span that's transparent and half the size of the image and attach the event on it.

Another one: leave the hover bind to the image but check if the mouse is in the bottom half of the image.

I would recommend the first one.

Upvotes: 1

Related Questions