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

I am new to jQuery and I am Trying to setup a gallery where when you hover over an image it shows the title attribute of that image on a div below and then on mouse out that title in the seperate div is hidden. Hope that makes sense!

我是jQuery的新手,我正在尝试设置一个图库,当你将鼠标悬停在图像上时,它会在下面的div上显示该图像的title属性,然后鼠标移出该单独div中的标题。希望有道理!

What I have gotten so far is this

到目前为止我得到的是这个

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

In the above example the class " .ngg-gallery-thumbnail-box " is the div that holds the image ( There are multiple instances of this div one for each gallery image ). The " .wpGallery " is the class of the div to which the title should show up on upon hover.

在上面的例子中,类“.ngg-gallery-thumbnail-box”是保存图像的div(每个图库图像有一个div的多个实例)。 “.wpGallery”是标题在悬停时应显示的div的类。

Thanks so much in advance, Hope this makes sense!

非常感谢,希望这是有道理的!

1 个解决方案

#1

You just need to use hover event and append your title on hover then remove it in hover out like this https://jsfiddle.net/p74pL1d1/

你只需要使用悬停事件并在悬停时附加你的标题然后将其删除,就像这样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('');
})