只更改悬停元素中的类

Question

所以我正在创建一个关于用户提交的食谱的页面.有些用户提交了关于食谱的简短引用,有些则没有.我希望在用户将鼠标悬停在配方图像上时显示引用(如果存在).

现在,我正在使用这个:

$(".recipe").hover(function(){
            $(".slider-submit").hide();
            $(".slider-description").show();
        },
        function(){
            $(".slider-submit").show();
            $(".slider-description").hide();
        });

第一个问题是它会改变所有食谱,而不仅仅是那些悬停在其上的食谱.第二个问题是,我不确定如何检查该配方是否存在"滑块描述".

这是我正在努力的一个小提琴.我还在学习JQuery,请给我任何提示!

Answer 1

像这样改变你的JS:

$(".recipe").hover(function(){
    $(this).find(".slider-submit").hide();
    $(this).find(".slider-description").show();
},
function(){
    $(this).find(".slider-submit").show();
    $(this).find(".slider-description").hide();
});

这样,您将仅定位属于正在悬停的元素的滑块,而不是将它们全部定位.