Question

我正在设置一个页面，其中包含一个主要内容div和一个滑块（Owl Carousel），下面将包含各种会议的各种发言人的图像。使用jQuery，我想为每个扬声器显示一个引号，它会在鼠标悬停时淡入主div，并在mouseout上淡出。

基本结构如下：

<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() {
    $(".quote-container").text($(".quote", this).text();
});

那应该是你追求的目标。

悬停中的其他CSS样式

$(".slide").hover(function() {
    $(".quote-container").fadeIn(500);
    $(".quote-container").text($(".quote", this).text();
    $(".quote-container").css("background-color", "red");
}, function() {
    $(".quote-container").fadeOut(500);
});

Answer 2

如果你需要容器中的类

，你可以这样做：

$(".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，如果你去响应网站，我很长时间使用它并且很棒......

jQuery：在悬停时将内容放入DIV

2 个答案: