CODEWITHSUNDEEP
jquerycssjquery-ui
Nikki Mather
Nikki Mather

Reputation: 1148

jQuery - show one instance of repeated div on hover

I'm trying to get a similar functionality to this website; http://theadeleexperience.com/ where you hover over the thumbnail, it shows the date of the post. I have all of the PHP and HTML code in place, but i need some help with my jQuery code to get this working.

The code below will show (obviously) every instance of the .test div when hovered (ironically, except the one i hover over); however i only want it to show the .test div i'm hovering - not the other 3 instances of it.

There may be an easier way to implement this other than the code below, or even without using jQuery for that matter.

$(document).ready(function() {
$(".test").hide();
    $(".thumbnail").mouseenter(function() {
        $(".test").show();
    $(".thumbnail").mouseleave(function() {
    $(".test").hide();
    });
        });
});

Upvotes: 3

Views: 500

Answers (4)

aifarfa
aifarfa

Reputation: 3939

HTML

<div class="thumbnail">
    <img alt="thumbnail here" src="http://distilleryimage1.s3.amazonaws.com/87fb9072abad11e2b60722000a9f09f0_7.jpg" />
    <div class="test">here is a test content</div>
</div>

JS

$(document).ready(function(){
    $('.test').hide();
    $('.thumbnail').mouseenter(function(){
        $(this).find('.test').each(function(e){
            $(this).show();
        });
    });
    $('.thumbnail').mouseout(function(){
        $(this).find('.test').each(function(e){
            $(this).hide();
        });
    });
});

CSS

.thumbnail {
    width:200px;
}
.thumbnail img{
    width:100%;
}
.test{
    background: black;
    color: white;
    opacity:0.8;
    margin:10px;
    position:absolute;
    top:0;
    z-index:100;
}

Upvotes: 1

Cody Guldner
Cody Guldner

Reputation: 2896

Here is the solution I came up with.

The main problem with the code that you provided was that you didn't close off your brackets after the mouseenter function. The key to getting only the one you are hovering on is by using this. You can give an argument to this, as seen below. .overlay, is what is being targeted, but you use this to ensure it is only the one being hovered over. The final code should look like this

$(".overlay").hide();
$("article").on("hover", function () {
  $(".overlay", this).slideToggle();
});

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388436

Use .hover()

$("article").hover(function() {
    $(".overlay", this).slideDown();
}, function() {
    $(".overlay", this).slideUp();
});

Upvotes: 0

arjunaskykok
arjunaskykok

Reputation: 956

What about this?

$(document).ready(function() {
    $(".test").hide();
    $(".test").mouseenter(function() {
        $(".test").show();
    });
    $(".test").mouseleave(function() {
        $(".test").hide();
    });
});

You focus on the test not on the thumbnail.

Upvotes: 0

Related Questions