修復.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上時，如果用戶隨后將鼠標懸停在跨度上，它將僅忽略鼠標事件。

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