0

一意の ID またはクラスを持たない HTML 要素に JS フェードイン/アウトを適用したいと考えています。

<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);

問題は、リスト内の写真にカーソルを合わせると、すべての帰属が表示されることです。一度に 1 つずつターゲットにする方法を教えてもらえますか?

4

1 に答える 1