0

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.

4

2 に答える 2

1

ドキュメントレディ機能を忘れたと思いますが、

    $(document).ready(function() {
      $(".portfolio a").hover(function () {
        $(".portfolio-overlay").toggle("slow");
      });
    });
于 2013-01-29T15:49:31.150 に答える
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');
});

おそらくそれは何か？アンカーから開始しているので.siblings()、同じ内にあるオーバーレイを参照して見つけ、.portfolioそれに応じて切り替えることができます。これにより、各.portfolio実行がページ上の他の実行から独立します。使用$('.portfolio-overlay')すると、ページ上のすべてのアイテムが切り替わります。

これが実際の例です：http：//jsfiddle.net/bradchristie/AhnGA/1/

于 2013-01-29T15:50:46.793 に答える