Devon Deason Devon Deason - 5 months ago 22
jQuery Question

Fixing Flickering Text on .hover

I am displaying the

tag information when the user hovers over the image. Here is the jQuery I'm using, which works well.

$("#content img").hover(function() {
var imageCaption = $(this).attr("alt");
if (imageCaption != '') {
var imgWidth = $(this).width();
var imgHeight = $(this).height();
var position = $(this).position();
var positionTop = ( + imgHeight - 26)
$("<span class='img-caption'><em>" + imageCaption +
"font-style": "normal !important",
"color": "#fff",
"position": "absolute",
"top": "200px",
"left": "5px",
"width": "80%"

Its a little buggy though, when the user hovers over the text, the text flashes in and out. I assume its because the mouse is leaving the
and entering the
that has been created. Any solutions to this problem would be greatly appreciated.


jsFiddle :

I have moved your element styles into the css file, no need to place inline styling when you can just target a class in your css file :) this will also enable you to easily change it


.img-caption {
  font-style: normal !important;
  color: #fff;
  position: absolute;
  top: 200px;
  left: 5px;
  width: 80%;
  pointer-events: none;

The only part you were missing is 'pointer-events', basically you can tell elements on the page to simply ignore events.

So now when the user mouses over the img, if the user then mouses over the span it will simply ignore mouse events.