Javascript jQuery:悬停时将文本插入容器div

我使用一个简单的jQuery图像滑块Owl Carousel来显示会议上的发言者列表和照片，并试图找到一种方法，将与每个发言者相关的文本覆盖到滑块上方的div上。我有一个模型页。正如你在模型上看到的，我有两个主要的div-即divsit和divcarousel-sit；在前者中，我有一个带有class.sit quote容器的容器，我希望将quote文本/标记注入其中。我希望这个覆盖文本从段落元素中提取。sit quote类，每个说话人都有这个类

除了在container 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
});

---

最后，我希望报价在主分区内淡入/淡出。感谢您的帮助，如果我需要在此处进一步说明目的，请告诉我。

您应该首先看到该报价 试试这个：

$(".slide-sit").hover(function() {
    var clone = $(this).find(".sit-quote").clone();
    clone.appendTo(".sit-quote-container").show(); // Here you should show the quote
}, function(){
    $(".sit-quote-container").html("");
});

如果要淡入，请执行以下操作：

$(".slide-sit").hover(function() {
    var clone = $(this).find(".sit-quote").clone();
    clone.appendTo(".sit-quote-container").fadeIn(); //Here if you want to fade the quote
}, function(){
    $(".sit-quote-container").html("");
});

---

使用下面的脚本从悬停项的.sit quote p标记中提取文本，并将其显示在.sit quote容器中

更新

如果需要，将引号包装在para标记中，并且为了避免复杂性，请使用不同的类名，在本例中为

CSS:.sit-quote_内部{显示：无；}

JS

---

旋转木马似乎在动态地注入幻灯片的克隆。在这种情况下，您可能希望委托事件处理程序，以便它能够处理动态生成的幻灯片

此外，如果您想淡出文本，您应该在fafeOut的完整回调中删除它，而不是简单地清空html Try

间隙灰色背景是.slide-sit的背景，由于边缘底部可见：15px；应用于包含名称样式规则的段落。item p main.css第67行，删除该行似乎可以解决问题

更新 最好在.sit quote容器中保留一个.slide，以便使用下面的脚本正确地淡入/淡出

$(document).on("mouseenter",".sit-carousel-container .slide-sit",function() {
    var content = $(this).find(".sit-quote").html();
   (".sit-quote-container .sit-quote").html(content).fadeIn("slow");
});

$(document).on("mouseleave",".sit-carousel-container .slide-sit", function(){
   $(".sit-quote-container").find(".sit-quote").fadeOut("slow")
});

---

通常情况下，您最好只显示和隐藏，而不是附加和删除。好的，但目的是从标记有特定类的各个div中提取内容，即，放置引号并将其显示在上面的容器中。将引号容器放置在悬停位置；请查看我的模型以获得进一步的澄清。谢谢Karan-我想知道如何使用标记，而不仅仅是文本，由于我想对其中的元素进行风格设计——最终在文本后面有一个半透明的白色背景，并以斜体再次引用演讲者的名字Karan——最后一个问题：有没有一种简单的方法来阻止淡入/淡出的实现方式？太好了！有道理；我来试一试。谢谢希蒂斯！我刚刚用你的代码更新了我的模型，它可以显示文本。尽管如此，仍然存在两个问题：1我想用半透明的白色背景设置叠加文本的样式，正如我在上面的评论中提到的；我有一个奇怪的问题，滑块元素下的间隙，尽管我将引用段落设置为显示：无；知道为什么会这样吗？再次感谢。@nickpish 1您所说的差距在您的演示中不可见。请提供复制该问题的演示。2因此，作为一个问答网站，一旦问题得到解决，就提出新的要求是一种不好的做法。如果你在尝试后无法回答，那么这更适合于回答另一个问题。我想设计其中的元素——最终在文本后面有一个半透明的白色背景，并以斜体引用发言人的名字——你有没有尝试过这样做？请不要误解，作为一个免费的编码服务…你的观点已经提出；我不是来这里胡说八道的。谢谢你的回答。谢谢，我会试一试。哦，伙计，这是从p项继承来的；谢谢你指出这一点。顺便说一句，非常感谢你的帮助。还有一个问题要问你：我已经接受了你的答案，而且效果很好；如果你参考我更新的模型，我唯一的问题是报价块在从一张幻灯片移动到下一张幻灯片时似乎会上下跳动；你知道这可能是什么原因吗？提前谢谢。@nickpish这是因为新的引语是在前一个引语消失之前附加的。最好是在html和jus中，先放一个.slide-sit-in.sit-quote容器

---

不要改变它的内容，淡入淡出，就像在更新中正确淡出报价一样。嗯，好的，我刚刚更新了我的模型，我一定是做错了什么。我在quote容器中添加了一个空的.slide；它应该有.sit报价类吗？如果我误解了，请原谅。。。

$(document).on("mouseenter",".slide-sit",function() {
   var clone = $(this).find(".sit-quote").clone();
   clone.appendTo(".sit-quote-container").fadeIn("slow");
});

$(document).on("mouseleave",".slide-sit", function(){
   $(".sit-quote-container")
   .find(".sit-quote")
   .fadeOut("slow",function(){ // Fadeout and then remove the text
      $(this).remove();
  })
});

$(document).on("mouseenter",".sit-carousel-container .slide-sit",function() {
    var content = $(this).find(".sit-quote").html();
   (".sit-quote-container .sit-quote").html(content).fadeIn("slow");
});

$(document).on("mouseleave",".sit-carousel-container .slide-sit", function(){
   $(".sit-quote-container").find(".sit-quote").fadeOut("slow")
});