Devon Deason Devon Deason - 1 year ago 71
Javascript 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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download