使用jQuery悬停问题

我有三种产品。我正在页面加载时显示上次激活的产品。如果我将鼠标悬停在其他产品上，则活动类将分配给该产品

现在我的问题是,

1） 当鼠标悬停在一个或两个产品上时，我必须从第三个产品中删除

新产品

文本，如果鼠标悬停在第三个产品上，则再次显示

新产品

2） 如果我直接悬停在第一个产品上，那么活动类不会从第三个产品中删除

当我的页面加载时。（这是正确的输出）

当我直接停留在产品一上时。（应将其从产品中移除）

请注意，我将鼠标悬停在产品1上，但产品3显示的是

新产品

文本。我必须把它去掉。

$（函数（）{
$（'.products.onloadhover'）.addClass（'product_set_hover'）；
});
$（“.products”）。悬停(
函数（）{
$（this）.addClass（“产品集悬停”）；
},
函数（）{
$（this）.removeClass（“产品集悬停”）；
}
);
.products{
边框：1px实心#000；
最小高度：250px；
}
.产品h2{
字体大小：20px；
颜色：#fff；
}
.新产品{
背景色：#fbc60e；
显示：内联块；
填充：10px；
文本对齐：居中；
}
.新产品{
字体大小：16px；
颜色：#000；
}
.产品设置悬停{
盒影：0.14像素rgba（0,0,0,1）；
背景色：#d76223；
}

产品1
产品1
新产品
产品1
你可以这样做

显式隐藏
新产品
，并显示活动的
产品
div是否具有类
新产品

$("div.new_products").hide();
$("div.product_set_hover div.new_products").show();


明确删除
product\u set\u hover
，这将删除最后一个活动的，然后将其分配回活动的
Products
div

$("div.product_set_hover").removeClass("product_set_hover");
$(this).addClass("product_set_hover");



$（函数（）{
$（'.products.onloadhover'）.addClass（'product_set_hover'）；
});
$（“.products”）。悬停(
函数（）{
$（“div.product\u set\u hover”）.removeClass（“product\u set\u hover”）；
$（this）.addClass（“产品集悬停”）；
$（“部门新产品”）.hide（）；
$（“div.product\u set\u hover div.new\u products”）.show（）；
}
);
.products{
边框：1px实心#000；
最小高度：100px；
宽度：100px；
}
.产品h2{
字号：5px；
颜色：#fff；
}
.新产品{
背景色：#fbc60e；
显示：内联块；
填充：10px；
文本对齐：居中；
}
.新产品{
字体大小：15px；
颜色：#000；
}
.产品设置悬停{
盒影：0.14像素rgba（0,0,0,1）；
背景色：#d76223；
}

产品1
新产品
产品1
新产品
产品1
您可以这样做：当产品元素T悬停时，从所有“产品设置悬停”元素中删除背景并隐藏“新产品”，然后将背景添加到当前元素，并显示“新产品”（如果存在）


$（函数（）{
$（'.products.onloadhover'）.addClass（'product_set_hover'）；
});
$（“.products”）。悬停(
函数（）{
$（.product\u set\u hover”）.removeClass（“product\u set\u hover”）；
$（“.new_products”）.hide（）；
$（this）.addClass（“产品集悬停”）；
$（this.find（“.new_products”）.show（）；
}
);
.products{
边框：1px实心#000；
最小高度：250px；
}
.产品h2{
字体大小：20px；
颜色：#fff；
}
.新产品{
背景色：#fbc60e；
显示：内联块；
填充：10px；
文本对齐：居中；
}
.新产品{
字体大小：16px；
颜色：#000；
}
.产品设置悬停{
盒影：0.14像素rgba（0,0,0,1）；
背景色：#d76223；
}

产品1
产品1
新产品
产品1

试试这个。
你的代码看起来不错，但需要一些调整。添加时需要删除该类这是主要思想

下面是hasClass（）函数，您可以在其中检查该类是否可用，如果可用，请删除它以解决您的问题

当你在框上悬停时，你需要删除新产品的范围

    $(function() {
          $(".products").hover(
            function() {
                 $(".new_products").hide();
                 if($(this).hasClass("product_set_hover")){
                      $(this).removeClass("product_set_hover");
                  }
                  else{
                   $(this).addClass("product_set_hover");
                  }
            });
        });

这将显示所有具有“新产品”标签的产品的“新产品”标签。不仅仅是对于悬停的产品。@Gerard，这段代码将针对悬停的产品执行，
$（此）
将仅在活动产品上执行。为第一个产品添加“new products”div，然后悬停它。它将出现在产品1和产品3中。@Mustapha，请检查显示不同代码和输出的JSFIDLE。我更改了FIDLElink@MustaphaLarhrouch，是的，您的代码对我来说非常有效。请给我时间检查。
    $(function() {
          $(".products").hover(
            function() {
                 $(".new_products").hide();
                 if($(this).hasClass("product_set_hover")){
                      $(this).removeClass("product_set_hover");
                  }
                  else{
                   $(this).addClass("product_set_hover");
                  }
            });
        });