Question

我在一个显示图像缩略图的页面上构建了一个投资组合部分。我还有一个隐藏的div，其中包含我希望在用户将鼠标悬停在缩略图上时显示的投资组合项目的信息。

这是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>

这是jQuery：

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

我的目的是在鼠标悬停在图像上时显示.portfolio-overlay，并在鼠标移出时隐藏它。

我知道jQuery缺少一些东西但是，如果我知道它是什么，我就不会发布这个（你知道它是怎么回事）。

感谢。

Answer 1

我认为您忘记了文档就绪功能，

    $(document).ready(function() {
      $(".portfolio a").hover(function () {
        $(".portfolio-overlay").toggle("slow");
      });
    });

Answer 2

$('.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/

如何使用jQuery Toggle显示隐藏的div？

2 个答案: