クラスを使用してjqueryの正しい要素を参照する方法

Question

Webサイトにカードが表示されています。私は、現在ホバーしているカードにラベルを表示したい。

main.js

$('.card').on("mouseover", function() { 
    $('.ui.right.corner.label').show(); 
}); 
$('.card').on("mouseout", function() { 
    $('.ui.right.corner.label').hide(); 
}); 

これは私が特定のカードのラベルが、私はカードのいずれかに置くたびに表示されていることを実現するまで正常に動作するように見えました。

のindex.php

<!--first card--> 
<div class="card" onclick="window.location='product.php';"> 

<img src="img/test1.jpg" class="image"> 
<a class="ui right corner label"> 
    <i class="heart icon"></i> 
</a> 
</div> 

<!--second card--> 
<div class="card" onclick="window.location='product.php';"> 

<img src="img/test2.jpg" class="image"> 
<a class="ui right corner label"> 
    <i class="heart icon"></i> 
</a> 
</div> 

<!--third card--> 
<div class="card" onclick="window.location='product.php';"> 

<img src="img/test3.jpg" class="image"> 
<a class="ui right corner label"> 
    <i class="heart icon"></i> 
</a> 
</div> 

私は現在、Rajaprabhuの答えを使って、子要素の問題を修正しました。ただし、このラベルはデフォルトでウェブサイトに表示されています。 .hideを非表示にしていますが、ウェブサイトの読み込み時にラベルを表示しない方が良いでしょうか？あなたはこれらのイベントハンドラの内部でthisリファレンスを使用する必要が

Answer 1

あなたが示すとその特定のクラスを持つすべての要素を隠しているためです。この方法を試してください。

$('.card').on("mouseover", function() { 
    $(this).children("a").show(); 
}); 
$('.card').on("mouseout", function() { 
    $(this).children("a").hide(); 
}); 

Answer 2

、

$('.card').on("mouseover", function() { 
    $('.ui.right.corner.label', this).show(); 
}); 

$('.card').on("mouseout", function() { 
    $('.ui.right.corner.label', this).hide(); 
});