如何使用此功能隐藏某些元素？

Question

当用户将鼠标悬停在上面时，我正在使用以下函数来缩放每个图像。

$(function() { 
    var imgScale = 4; 
    $("img").each(function() { 
     $.data(this, 'size', { 
      width: $(this).width(), 
      height: $(this).height() 
     }); 
    }).hover(function() { 
     $(this).stop().animate({ 
      height: $.data(this, 'size').height * imgScale, 
      width: $.data(this, 'size').width * imgScale 
    }); 
    }, function() { 
     $(this).stop().animate({ 
      height: $.data(this, 'size').height, 
      width: $.data(this, 'size').width 
     }); 
    }); 
}); 

页面的基本结构如下：

<div id="product-container" style="width: 100%; overflow: auto;"> 
    <div id="products" style="width: 50%; display: block; float: left;"> 
     <h2>Products</h2> 

     <div class="product"> 
      <div class="image"> 
       <a href="page.php?product=123" title="Product 123"> 
        <img width="80" height="60" src="product123.jpg" /> 
       </a> 
      </div> 

      <div class="link"> 
       <p><a id="link-123" href="page.php?product=123" title="Product 123">Product 123</a></p> 
      </div> 
     </div> 

     <div class="product"> 
      <div class="image"> 
       ... 
      </div> 

      <div class="link"> 
       ... 
      </div> 
     </div> 

     ... 

    </div> <!-- Close 'products' div --> 

使用jQuery，我想隐藏所有当前没有悬停在产品<p><a id="link-123"...> ... </a></p>标签。

除此之外，我想在展示产品名称的展开图片上创建文字叠加层（例如“Product 123”）。这可以从图像本身的title属性中提取。

这是一个非常早期的工作，因为你可能已经猜到我是jQuery的新手了。我只是想抓住jQuery的一些基本功能。

Answer 1

拳你要隐藏的各个环节与

$('.link').hide(); 

在你的悬停功能，你必须找到你的形象正确<div class="link">。您可以通过树加紧你的<div class="product">和向下<div class="product">以做到这一点（也有其他可能的方式来实现这一目标：

$("img").parents('.product').find('.link'); 

现在隐藏或显示该元素

你完整的代码可以样子。

$(function() { 
    $(".link").hide(); 
    var imgScale = 4; 
    $("img").each(function() { 
     $.data(this, 'size', { 
      width: $(this).width(), 
      height: $(this).height() 
     }); 
    }).hover(function() { 
     $(this).stop().animate({ 
      height: $.data(this, 'size').height * imgScale, 
      width: $.data(this, 'size').width * imgScale 
     }).parents('.product').find('.link').show(); 

    }, function() { 
     $(this).stop().animate({ 
      height: $.data(this, 'size').height, 
      width: $.data(this, 'size').width 
     }).parents('.product').find('.link').hide(); 
    }); 
});