0

我想将 JS 淡入/淡出应用到没有唯一 ID 或类的 HTML 元素。

<div class="view-content">
      <table class="views-view-grid cols-3">

  <tbody>
          <tr class="row-1 row-first row-last">
                  <td class="col-1 col-first views-portals-row">

  <div class="views-field views-field-title">        <h1 class="field-content view_portals_title"><a href="http://dev.test.eu/content/hydrography">Hydrography</a></h1>  </div>  
  <div class="views-field views-field-field-attribution">        <div class="field-content view_portals_attr" style="display: none;"></div>  </div>  
  <div class="views-field views-field-field-image-portal">        <div class="field-content view_portals_img"><a href="http://dev.test.eu/content/hydrography"><img width="261" height="200" alt="" src="http://dev.test.eu/sites/test.eu/files/public/hydrography.jpg" typeof="foaf:Image"></a></div>  </div>  
  <div class="views-field views-field-body">        <div class="field-content view_portals_desc"><p>Data on bathymetry&nbsp;(water depth), coastlines, and geographical location of underwater features:&nbsp;wrecks.</p>
<p><a href="http://dev.test.eu/content/hydrography" class="button small">Read more</a></p>
</div>  </div>          </td>
                  <td class="col-2 views-portals-row">

  <div class="views-field views-field-title">        <h1 class="field-content view_portals_title"><a href="http://dev.test.eu/content/geology">Geology</a></h1>  </div>  
  <div class="views-field views-field-field-attribution">        <div class="field-content view_portals_attr" style="display: none;"></div>  </div>  
  <div class="views-field views-field-field-image-portal">        <div class="field-content view_portals_img"><a href="http://dev.test.eu/content/geology"><img width="299" height="200" alt="" src="http://dev.test.eu/sites/test.eu/files/public/geology.png" typeof="foaf:Image"></a></div>  </div>  
  <div class="views-field views-field-body">        <div class="field-content view_portals_desc"><p>Data on seabed substrate, sea-floor geology, coastal behaviour, geological events and probabilities, and minerals.</p>
<p><a href="http://dev.test.eu/content/geology" class="button small">Read more</a></p>
</div>  </div>          </td>
                  <td class="col-3 col-last views-portals-row">

  <div class="views-field views-field-title">        <h1 class="field-content view_portals_title"><a href="http://dev.test.eu/content/seabed-habitats-0">Seabed Habitats</a></h1>  </div>  
  <div class="views-field views-field-field-attribution">        <div class="field-content view_portals_attr" style="display: none;">Posidonia oceanica, &copy; David Balata</div>  </div>  
  <div class="views-field views-field-field-image-portal">        <div class="field-content view_portals_img"><a href="http://dev.test.eu/content/seabed-habitats-0"><img width="267" height="200" alt="" src="http://dev.test.eu/sites/test.eu/files/public/Posidonia%20oceanica_2.jpg" typeof="foaf:Image"></a></div>  </div>  
  <div class="views-field views-field-body">        <div class="field-content view_portals_desc"><p>Data on modelled seabed habitats based on seadbed substrate, energy , biological zone, and&nbsp;salinity.</p>
<p><a href="http://dev.test.eu/content/seabed-habitats-0" class="button small">Read more</a></p>
</div>  </div>          </td>
              </tr>
      </tbody>
</table>
    </div>

我使用以下脚本来隐藏和显示图片的归属：

(function ($) {
    $(document).ready(function() {
    $('.view_portals_attr').hide();
      $('.views-portals-row').hover(function() {
        $('.view_portals_attr').fadeIn();
      }, function() {
        $('.view_portals_attr').fadeOut();
      });
    });      
})(jQuery);

问题是，当将鼠标悬停在列表中的任何图片上时，都会显示所有属性。有人可以给我一个线索如何一次定位一个吗？

4

1 回答 1

2

你需要的是只选择孩子，像这样：

(function ($) {
    $(document).ready(function() {
    $('.view_portals_attr').hide();
      $('.views-portals-row').hover(function() {
        $(this).find('.view_portals_attr').fadeIn();
      }, function() {
        $(this).find('.view_portals_attr').fadeOut();
      });
    });      
})(jQuery);

见演示：http: //jsfiddle.net/SVxKx/

于 2013-09-03T14:37:35.913 回答