jquery - jQueryホバーで複数の要素をターゲットにする

Question

image-wrap と呼ばれる複数の div があり、それらの 1 つにカーソルを合わせると、その特定の image-wrap 内の要素、この場合は item と呼ばれる p タグ内のリンクと画像を表示したい (すべてを表示するのではなく)そのうちの）。私はネットを検索しましたが、見つけたほとんどの回答は $(this) を使用すると言われています。イメージラップに影響を与えたくないので、 $(this) は機能しません。

html:

<div class="image-wrap">
<p class="item"><span><a href="#">Link</a><img src=" "></span></p>
</div>

<div class="image-wrap">
<p class="item"><span><a href="#">Link</a><img src=" "></span></p>
</div>

<div class="image-wrap">
<p class="item"><span><a href="#">Link</a><img src=" "></span></p>
</div>

jQuery:

<script>
$('.image-wrap').hover( 
function() {
$('.item').css('display','block');
},
function() {
$('.item').css('display','none');
});
</script>

Answer 1

この特定の問題を解決する最善の方法は、JavaScript ではなく CSS を使用することです。代わりに、次の CSS を検討してください。

.image-wrap .item {
  display: none;
}

.image-wrap:hover .item {
  display: block;
}

Answer 2

使用する

$('.image-wrap').hover( 
function() {
$('.item',this).css('display','block');
},
function() {
$('.item',this).css('display','none');
});

特定.itemの.image-wrap

Answer 3

このようなことができます。

$('.image-wrap').hover( 
function() {
  $(this).children('.item').css('display','block');
},
function() {
  $(this).children('.item').css('display','none');
});

また

$('.image-wrap').hover( 
function() {
  $(this).children('.item').show();
},
function() {
  $(this).children('.item').hide();
});