一意の 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 (water depth), coastlines, and geographical location of underwater features: 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, © 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 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 つずつターゲットにする方法を教えてもらえますか?