Question

我有一个包含两个由锚标记包围的元素的div。页面加载时，图像可见，info_overlay div内容被隐藏。

我希望隐藏图像并在鼠标悬停锚标记时显示info_overlay div。

这是html：

<div class="project">
<a class="project_link" href="/reap-renewable-energy-and-preservation">
<img src="/photos/reap-home-page-copy.jpg" alt="REAP" >

<div class="info_overlay" style="display:none;">
<h3>REAP</h3>
<p></p>
<p><a href="project/reap-renewable-energy-and-preservation">VIEW</a></p>
</div><!-- end info_overlay -->
</a>
</div><!-- end project -->

这是jQuery。到目前为止，我有它，所以当你鼠标悬停在图像上时，所有图像都会消失。我想只是将“这个”图像作为目标，以便它消失，但我无法完全掌握语法。

$( "a.project_link" ).hover(function() {
  $( "img" ).hide(  );
});

Answer 1

你必须这样做：

$("a.project_link").hover(function () {
    $(this).find("img").hide();
    $(this).next(".info_overlay").show();
}, function () {
    $(this).find("img").show();
    $(this).next(".info_overlay").hide();

});

FIDDLE EXAMPLE

FIDDLE EXAMPLE 2

FIDDLE EXAMPLE 3

Answer 2

试试这个

$(this).parent().find('img').hide()

Answer 3

您不需要jQuery来执行此操作，您可以使用CSS :hover伪选择器执行此操作：

a.project_link:hover img { display: none; }
a.project_link:hover .info_overlay { display: block; }

如果你想要平滑过渡：

a.project_link * { transition:all .2s linear; -moz-transition:all .2s linear; -webkit-transition:all .2s linear; }

你有没有理由想用jQuery做这件事？

我如何隐藏这个＆＃39;使用jQuery悬停的图像？

3 个答案: