Question

I have a portfolio section I am building on a page that displays a thumbnail of an image. I also have a hidden div that contains information about the portfolio project that I would like to show when a user mouses over the thumbnail.

Here is the HTML:

<div class="portfolio">
    <a href="#"><img src="photos/work_2.jpg" alt="work_1" width="181" height="180"></a>
    <div class="portfolio-overlay" style="display:none;">
        <p class="client-name">Encore Azalea</p>
        <div class="white-line"></div>
        <p class="services">website redesign +<br />mobile site launch</p>
    </div>
</div>

Here is the jQuery:

<script>
$(".portfolio a").hover(function () {
$(".portfolio-overlay").toggle("slow");
});
</script>

My intent is to display .portfolio-overlay when you mouse over the image and hide it when you mouse out.

I know there is something missing with the jQuery but, if I knew what it was, I wouldn’t be posting this (you know how it goes).

Thanks.

Answer 1

$('.portfolio a:has(>img)').hover(function(e){
  var $overlay = $(this).siblings('.portfolio-overlay');
  $overlay.toggle('slow');
},function(e){
  var $overlay = $(this).siblings('.portfolio-overlay');
  $overlay.toggle('slow');
});

Something that that perhaps? Since you’re starting at the anchor you can reference .siblings() and find the overlay that’s within the same .portfolio, then toggle it accordingly. This also makes each .portfolio run independent of others on the page, where as using $('.portfolio-overlay') will toggle all the items on the page.

Here’s a working example: http://jsfiddle.net/bradchristie/AhnGA/1/