Question

我在显示使用jQuery隐藏的图像时出现问题。

我使用jQuery隐藏了一个带有'img.zoom'类的图像。我希望能够将鼠标悬停在图像所在的列表项上并显示隐藏的图像。我能够做到这一点，但它会影响该图像中的每个列表项。我只希望它影响该特定列表项。

请帮忙。

我的代码：

 <ul class="portfolio">
  <li> <img src="images/example.jpg" width="200" height="200" alt="Example" /> <img src="images/row.png" width="11" height="11" class="zoom" /> </li>
  <li><img src="images/example.jpg" width="200" height="200" alt="Example" /><img src="images/row.png" width="11" height="11" class="zoom" /></li>
  <li><img src="images/example.jpg" width="200" height="200" alt="Example" /></li>
  <li><img src="images/example.jpg" width="200" height="200" alt="Example" /></li>
</ul>

我的js：

// hide zoom button
$("img.zoom").hide(); 
// show zoom button on hover
$("ul li").hover(function () {
$('img.zoom').show();
});

非常感谢提前。

克雷格

更新

我设法通过调整代码来解决这个问题

$('img.zoom', this).toggle();

但是，有没有去掉这个进出？

Answer 1

在悬停功能中执行此操作

$(this).find('img.zoom').show();

回调函数中的

this表示当前的DOM元素，因此$(this)将解析为表示悬停的li的jQuery对象，而find将执行CSS选择基于li的后代。

Answer 2

实际上，要完成并将Akira的答案更进一步

$('ul li').hover(function() {
    $(this).find('img.zoom').show();
},function() {
    $(this).find('img.zoom').hide();
})

Answer 3

如果你想要褪色：

$('ul li').hover(function() {  
    $(this).find('img.zoom').fadeIn();  
},function() {  
    $(this).find('img.zoom').fadeOut();  
});

如何显示使用jQuery隐藏的图像

3 个答案: