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

悬停时，jQuery仅显示此内容，而不是全部

2 个答案: