Question

我使用一个简单的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中定位淡入/淡出的引号。感谢您的帮助，如果我需要进一步澄清这里的目标，请告诉我。

Answer 1

你应该首先看到引用试试这个：

$(".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("");
});

Answer 2

使用以下脚本从悬停项目的.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('');
    });

Answer 3

轮播似乎是动态注入幻灯片的克隆。在这种情况下，您可能希望委派事件处理程序，以便它可以与动态生成的幻灯片一起使用。

另外，如果你想淡出文字，你应该在fafeOut的完整回调中将其删除，而不是简单地清空html尝试

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

差距（灰色背景）是.slide-sit的背景，由于margin-bottom: 15px;应用于包含名称的段落（样式规则{ {1}} main.css第67行似乎），删除它将解决问题。

<强>更新如果您在.item p中保留.slide-sit，那么您可以使用以下脚本正确淡入淡出。

.sit-quote-container

jQuery：在悬停时将文本插入容器div

3 个答案: