CODEWITHSUNDEEP
jquerycsshover
Jason Lucas
Jason Lucas

Reputation: 27

Change content div when hover link

For a business website I'm trying to achieve the following: - A div with testimonials from clients. - A list with logos from those clients.

When the user hovers over a logo, the correct testimonial should be displayed in the div.

I've got the following markup:

<div id="testimonial-container"><div class="testimonial">Here comes a testimonial</div>
    <div class="testimonial">Here comes another testimonial</div>
    <div class="testimonial">And another one</div>
    <ul class="testimonial-logos">
       <li><a><img src="logo-1.jpg" /></a></li>
       <li><a><img src="logo-2.jpg" /></a></li>
       <li><a><img src="logo-3.jpg" /></a></li>
    </ul>
</div>

The hover effect will be done with CSS (opacity:0, and 1), so it isn't really a slider.

To add a class to the active testimonial, I use this code:

jQuery('#testimonial-container .testimonial-logos a').hover(function(){
    jQuery('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').addClass('active');
});

Any ideas how to switch the testimonials in the div? Thanks in advance!

Upvotes: 1

Views: 2171

Answers (4)

nnnnnn
nnnnnn

Reputation: 150020

Assuming the testimonials are in the same order as the corresponding logos then something like this will work (place within a document ready handler or in a script block at the end of the body):

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide();

$(".testimonial-logos li", $container).hover(function() {
    $testimonials.eq( $(this).addClass("active").index() ).show();
}, function() {
    $testimonials.eq( $(this).removeClass("active").index() ).hide();
});

Demo: http://jsfiddle.net/YG5aV/3

This caches a jQuery object containing the testimonial divs, and immediately hides them all. Then within the hover handler, on mouse enter it shows the one corresponding to the logo being hovered and on mouse leave it hides it again.

UPDATE: If the intention is to do something only on mouse enter rather than mouse enter and leave then I'd suggest .mouseenter() rather than .hover() because the latter is a shortcut for assigning both an enter handler and a leave hander. The following does what you describe in the comment - note the .eq(0).mouseenter() on the end, which triggers the mouseenter for the first li element so that it will be the active one to start with.

var $container = $("#testimonial-container"),
    $testimonials = $(".testimonial", $container).hide(),
    $prev;

$(".testimonial-logos li", $container).mouseenter(function() {
    if ($prev)
       $testimonials.eq( $prev.removeClass("active").index() ).hide();
    $testimonials.eq( ($prev = $(this).addClass("active")).index() ).show();
}).eq(0).mouseenter();

Demo: http://jsfiddle.net/YG5aV/4/

Upvotes: 1

WolvDev
WolvDev

Reputation: 3226

You can use the .index() and .eq() selectors to determine which link you hovered.

$('#testimonial-container .testimonial-logos a').hover(function(){
    var index = $('#testimonial-container .testimonial-logos a').index(this);
    $('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').removeClass('active');
    $('#testimonial-container .testimonial, #testimonial-container .testimonial-logos a').eq(index).addClass('active');
});

jsfiddle link: http://jsfiddle.net/8EgB4/

Upvotes: 1

Mark M
Mark M

Reputation: 976

You could get the ordinal of the hovered child using index and then access the related testimonial using the nth-child selector. The nth-child selector uses an ordinal, so you'd need to add 1 to the index value to get the correct testimonial. You would also need to make sure that you list your logos and testimonials in the same order.

Upvotes: 0

theedam
theedam

Reputation: 629

I would give each of your testimonals an ID for example <div class"testimonial" id="logo-1.jpg"> then on the mouse over you logo it can find the correct testimonial and display it

Upvotes: 1

Related Questions