修复 .hover 上的闪烁文本

Question

我在用户将鼠标悬停在图像上时显示 alt 标签信息。这是我正在使用的 jQuery，效果很好。

<script>
$("#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 = (position.top + imgHeight - 26)
        $("<span class='img-caption'><em>" + imageCaption +
            "</em></span>").css({
            "font-style": "normal !important",
            "color": "#fff",
            "position": "absolute",
            "top": "200px",
            "left": "5px",
            "width": "80%"
        }).insertAfter(this);
    }},function(){$(this).siblings('.img-caption').remove();}
);
</script>

虽然有一点问题，当用户将鼠标悬停在文本上时，文本会闪烁。我假设它是因为鼠标离开 img 并进入已创建的 span。如果能解决此问题，我们将不胜感激。

Answer 1

jsFiddle : https://jsfiddle.net/m3h8bffw/

我已将您的元素样式移动到 css 文件中，当您可以在 css 文件中定位 class 时，无需放置内联样式 :) 这也将让你轻松改变它

CSS

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

您唯一缺少的部分是 'pointer-events'，基本上您可以告诉页面上的元素简单地忽略事件。

所以现在当用户将鼠标悬停在 img 上时，如果用户随后将鼠标悬停在 span 上，它将简单地忽略鼠标事件。

http://caniuse.com/#feat=pointer-events https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

修复 .hover 上的闪烁文本

Fixing Flickering Text on .hover

javascript

css

jquery

alt