javascript - jQuery:在悬停时将文本插入容器div

我正在使用一个简单的jQuery图像滑块（Owl Carousel）在会议上显示带有照片的发言人列表，并且我试图找到一种方法将与每个发言人相关的文本覆盖到滑块上方的div上。我有一个样机页面here。如您在样机上看到的，我有两个主要的div，即div#sit和div#carousel-sit;在前者中，我有一个容器，该容器的类为.sit-quote-container，我想在其中插入报价文本/标记。我希望此重叠文本从每个发言者都具有的.sit-quote类的段落元素中提取。

除了在容器div中显示适当的文本的问题之外，我还发现在每张幻灯片中放置.sit-quote段落会导致在扬声器名称（下方的灰色框）下出现空白，我不知道鉴于我将.sit-quote设置为display:none的原因，为什么会发生这种情况。我想知道是否可能需要将包含引号的元素全部移出滑块标记（？）

至于实际的悬停功能，这是我到目前为止在另一个SO用户的帮助下所拥有的功能。但它似乎不起作用：

$(".slide-sit").hover(function() {
    var clone = $(this).find(".sit-quote").clone();
    clone.appendTo(".sit-quote-container");
}, function(){
    $(".sit-quote-container").html(""); // this clears the content on mouseout
});

最终，我希望引号在主div内淡入/淡出。感谢您的协助，如果需要进一步说明此目的，请告诉我。

最佳答案

使用以下脚本从悬停项的.sit-quote p标签中提取文本并将其显示在.sit-quote-container中

更新

如果需要，将引号括在para标记中，为避免复杂性，请使用其他类名，在本例中为.sit-quote_inner。

CSS：.sit-quote_inner{ display:none; }

JS

    $('.sit-carousel-container .owl-item').hover(function(){
       var quote = $(this).find('.sit-quote').text(); //Only text not the p tag
       quote = '<p class="sit-quote_inner">' + quote + '</p>';
      $('.sit-header .sit-quote-container').html(quote);
       $('.sit-quote_inner').fadeIn(); //Add this
    },function(){
      $('.sit-header .sit-quote-container').html('');
    });

关于javascript - jQuery:在悬停时将文本插入容器div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25196326/