jQuery，在悬停时，只显示这个，而不是所有的兄弟姐妹

Question

在页面加载上，我隐藏了类" .work-info"。当鼠标结束时，" .work-item"我试图仅显示一个" .work-info"的实例，而不是显示所有兄弟姐妹。

我尝试了

 jQuery(".work-item").mouseenter(function(){
        jQuery(this).$btn.show();
    }); 
  jQuery(".work-item").mouseleave(function(){
        jQuery(this).$btn.hide();
    });   

但这是错误的。

这就是我目前拥有的：

var $btn = jQuery('.work-info').hide();

jQuery(".work-item").mouseenter(function () {
    $btn.show();
});
jQuery(".work-item").mouseleave(function () {
    $btn.hide();
});

Answer 1

您可能想要

// hide all 
jQuery('.work-info').hide();

jQuery(".work-item").mouseenter(function () {
    // use jquery find on the current selector
    jQuery(this).find(".work-info").show();
});
jQuery(".work-item").mouseleave(function () {
    jQuery(this).find(".work-info").hide();
});

Answer 2

您可以做：

$('.work-info').hide(); 
$('.work-item').mouseenter(function () {
    $('.work-info').show();
});
$('.work-item').mouseleave(function () {
    $('.work-info').hide();
});