jQuery:悬停时将内容放入 DIV

Question

我正在设置一个页面，其中包含一个主要内容 div 和一个 slider (Owl Carousel)，该 slider 下方将包含 session 上各种演讲者的图像。使用 jQuery，我想为每个演讲者显示一个报价，该报价将在鼠标悬停时淡入主 div，并在鼠标移出时淡出。

基本结构如下:

<div id="slider-container">
    <div id="main">
        <div class="quote-container"></div>
    </div>
    <div id="carousel-wrapper">
        <div class="owl-carousel">
            <div class="slide">
                <img src="http://placehold.it/125x125">
                <p>Speaker Name 1</p>
                <p class="quote">This is a test quote</p>
            </div>
            <div class="slide">
                <img src="http://placehold.it/125x125">
                <p>Speaker Name 1</p>
                <p class="quote">This is another test quote</p>
            </div>
            <div>[MORE SLIDES HERE...</div>
        </div>
    </div><!-- /#carousel -->    
</div><!-- /#slider-container --> 

我设置了一个测试页面 here列出了主要组件。理想情况下，我希望 .quote 类的各种实例中包含的引号悬停在上面的 .quote-container div 中。每个引号的文本量会很大，我想尽可能避免使用固定高度的容器，以便它适应文本的长度——即具有固定量的填充和定位的白色背景在主 div 的内容上(每个引用的一般定位也将保持不变。)

我希望使用 jQuery 可以相对简单地实现这种效果。感谢您的指导；如果我需要就我要实现的目标提供任何进一步的说明，请告诉我。

Answer 1

如果你需要

容器中的类，你可以这样做:

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

你可以使用 flex-slider，如果你想要响应式网站，我会使用它很长时间而且它很棒......