Блог

Я отображаю 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 то, что было создано. Любые решения этой проблемы были бы высоко оценены.

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;
}
  

Единственная часть, которую вам не хватало, это ‘pointer-events’, в принципе, вы можете указать элементам на странице просто игнорировать события.

Итак, теперь, когда пользователь наводит курсор мыши на изображение, если пользователь затем наведет курсор мыши на промежуток, он просто проигнорирует события мыши.

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