jQuery: inserting text into container div on hover

Question

I'm using a simple jQuery image slider (Owl Carousel) to show a list of speakers at a convention with photos, and I'm trying to find a way to overlay text associated with each speaker onto a div placed above the slider. I have a mockup page here . As you can see on the mockup, I have two primary divs-- ie div#sit and div#carousel-sit ; within the former I have an container with the class .sit-quote-container into which I'd like the quote text/markup injected. I would like this overlay text to pull from the paragraph elements with the .sit-quote class that exist for each speaker.

In addition to the problem of displaying the appropriate text within the container div, I'm seeing that placing the .sit-quote paragraph within each slide is causing a gap to appear under the speaker name (the grey box underneath) and I have no idea why this is happening given that I've set .sit-quote to display:none . I'm wondering if perhaps I need to move the elements containing the quotations out of the slider markup altogether (?)

As for the actual hover function, this is what I have so far, with the help of another SO user; but it doesn't seem to be working:

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

Ultimately, I'd like the quotes to fade in/out positioned within the main div. Thanks for any assistance, and please let me know if I need to provide further clarification as to the aim here.

Answer 1

you should first visible that quote try this:

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

if you want to fade in:

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

Use the below script to pull the text from .sit-quote p tag of the hovered item and display it in the .sit-quote-container

UPDATE

If needed wrap the quote in a para tag and to avoid complexity use a different class name, in this case .sit-quote_inner .

CSS : .sit-quote_inner{ display:none; } .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

The carousel seems to be dynamically injecting clones of the slides. In this case, you might want to delegate your event handler so that it works with the dynamically generated slides.

Also, if you want to fadeOut the text, you should remove it in the complete callback of fafeOut instead of simply emptying the html Try

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

The gap ( grey background ) is the background of .slide-sit , which is visible due to the margin-bottom: 15px; applied on the paragraph containing name ( style rule .item p main.css line 67 it seems ), removing this will fix the issue.

Update It'd be better if you keep a .slide-sit inside the .sit-quote-container so that you can fade it in/out properly using the below script.

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