悬停时在单独的 div 上显示图片标题

Question

我是 jQuery 的新手，我正在尝试设置一个画廊，当您将鼠标悬停在图像上时，它会在下面的 div 上显示该图像的标题属性，然后在鼠标移开时显示该图像的标题属性单独 div 中的那个标题是隐藏的。希望这是有道理的！

目前我得到的是这个

jQuery(".ngg-gallery-thumbnail-box img").each(function( index ) {
    var title = jQuery(this).attr( "title" );
    jQuery(".ngg-gallery-thumbnail-box img").on({
        mouseenter: function () {
           jQuery(".wpGallery").append(title);
        },
        mouseleave: function () {
           //stuff to do on mouse leave
        }
    });
});

在上面的示例中，class“.ngg-gallery-thumbnail-box”是保存图像的 div（每个图库有多个 div 实例图片）。 “ .wpGallery ”是 div 的 class ，悬停时标题应该显示在上面。

非常感谢，希望这是有道理的！

Answer 1

您只需要使用 hover event 并在 hover 上附加您的标题，然后在 hover out 中删除它，就像这样 https://jsfiddle.net/p74pL1d1/

jQuery(".ngg-gallery-thumbnail-box img").hover(function(){
  var title = jQuery(this).attr( "title" );
  jQuery(".wpGallery").append(title);
},function(){
  jQuery(".wpGallery").html('');
})

悬停时在单独的 div 上显示图片标题

Show image title on a seperate div upon hover

javascript

jquery

gallery