Javascript jQuery，悬停时在另一个div中显示文本片段

我正在尝试构建一个交互式横幅，当您将鼠标悬停在横幅上时，您可以将鼠标悬停在每个图像上并看到一段文本

我试图让这个文本片段出现在我的div标题为“textbox”中，但当鼠标离开每个图像时，我很难改变它，例如，你必须看到我的小提琴

在将鼠标悬停在html蓝色框上之前加载每个图像

jQuery

---

是否仍要在图像旁边的灰色框中显示详细信息？或者只在红色框内？只在红色框内@andyy您可以使用css将灰色的figcaption绝对定位在右上角。那不是你想要的吗？

$(document).ready(function () {

$(function () {

    var people = [{
        id: 1,
        name: 'Adam',
        bio: 'This is Adam\'s Biography. Sed ut perspiciatis unde omnis iste natus error sit voluptatem',
        image: 'justin.jpg'
    }, {
        id: 2,
        name: 'Brian',
        bio: 'This is Brian\' Biography. Sed ut perspiciatis unde omnis iste natus error sit voluptatem',
        image: 'chris.jpg'
    }, {
        id: 3,
        name: 'Charlie',
        bio: 'This is Charlie\'s Biography. Sed ut perspiciatis unde omnis iste natus error sit voluptatem',
        image: 'sam.jpg'
    },

    ];

    w = 750;
    h = 450;

    var counter = 0;

    (function nextFade() {
        counter++;
        var data = people[Math.floor(Math.random() * people.length)];
        var figure = $('<figure style="float:left; width:150px; height:150px; background:red;" />');
        var information = '<img src="http://www.placekitten.com/150/150" /><figcaption><h6>Meet ' + data.name + '</h6><p>' + data.bio + '</p><a href="#">Read about ' + data.name + '.</a> </figcaption>';
        figure.html(information).appendTo('.interactive-banner-faces').hide().fadeIn(100, function () {
            if (counter < 15) {
                nextFade();
            } else {

                $('.interactive-banner-faces').children(':nth-child(12n+1), :nth-child(12n+2), :nth-child(12n+3)').addClass('rightTxt');

                // On mouseover, fadeout the text overlay so we can play with the banner
                $('.interactive-banner').on('mouseenter', function () {

                    $('.textbox').html(data.bio).fadeIn();
                    $('.overlay').stop().animate({
                        'top': '-450px'
                    }, 200, 'easeInCirc');
                }).on('mouseleave', function () {
                    $('.textbox').html('').fadeOut();
                    $('.overlay').stop().animate({
                        'top': '0'
                    }, 600, 'easeOutCirc');
                });

            };
        });
    })();

});

});