Question

i have a site in which I show the post text on mouseover the image. But when mouse come over the post text, post text starts fluctuating(show or hide ver fast). Please help me to solve this problem.

To test, just take mouse over any image, then bring mouse near to post text. it starts effecting( show or hide the post text)

Answer 1

I would suggest going to a more CSS approach. Here’s a quick JSfiddle with an example:

http://jsfiddle.net/EuWCp/4/

As mentioned in my comment above, the issue is because of the “onmouseout” and “onmouseover” events and how it sees the text that is over the image.

The “onmouseover” even triggers when you hover over the image but hovering over text that is also over the image triggers the “onmouseout” event, which removes the text, which also triggers the “onmouseover” event because the mouse is (again) over the image. Which causes a loop and makes the image “flash” or fluctuate between these two states.

The JSFiddle just wraps the image and a “caption” around an anchor tag (not much different from how you’re currently doing it). It then hides/displays the caption based on hovering.

The CSS can be changed and cleaned up in different ways. For example, I just a static width/height on the container element (A tag). There’s different ways of doing this.

Also, I simply did “display:none” and “display:block” for showing/hiding the caption. This isn’t very friendly to screen readers or SEO. It would be better to do a “left:-999em” and “left:0” on hover (popular drop-down menu method).

There’s probably a good opportunity to use the FIGURE and FIGCAPTION HTML5 tags here too. And I used the RGBA css for a transparent background. This will run into old IE browser support issues. You can use other methods with PNG’s to get better backwards compatibility if you need it.

Hope that helps.
Cheers!