0

我在显示图像缩略图的页面上构建了一个投资组合部分。我还有一个隐藏的 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 缺少一些东西，但是，如果我知道它是什么，我就不会发布这个（你知道它是怎么回事）。

谢谢。

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运行都独立于页面上的其他运行，其中 using$('.portfolio-overlay')将切换页面上的所有项目。

这是一个工作示例：http: //jsfiddle.net/bradchristie/AhnGA/1/

于 2013-01-29T15:50:46.793 回答