javascript - 修复 .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 文件中定位一个类时不需要放置内联样式:) 这也将使你能够轻松地更改它

CSS

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

您唯一缺少的部分是“指针事件”，基本上您可以告诉页面上的元素简单地忽略事件。

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

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