我希望优化以下代码。它在悬停时添加活动类,并在另一个元素中悬停时删除类,非常感谢任何建议。
$("#1 .benefits").hover(function() {
$('.promote-benefits #1 .benefits-text').addClass('active');
$('.promote-benefits #2 .benefits-text,.promote-benefits #3 .benefits-text,.promote-benefits #4 .benefits-text, .promote-benefits #5 .benefits-text ').removeClass('active');
}, function() {
/*$('.promote-benefits #2 .benefits-text').removeClass('active'); */
});
$("#2 .benefits").hover(function() {
$('.promote-benefits #2 .benefits-text').addClass('active');
$('.promote-benefits #1 .benefits-text,.promote-benefits #3 .benefits-text,.promote-benefits #4 .benefits-text, .promote-benefits #5 .benefits-text ').removeClass('active');
}, function() {
/*$('.promote-benefits #2 .benefits-text').removeClass('active'); */
});
$("#3 .benefits").hover(function() {
$('.promote-benefits #3 .benefits-text').addClass('active');
$('.promote-benefits #1 .benefits-text,.promote-benefits #2 .benefits-text,.promote-benefits #4 .benefits-text, .promote-benefits #5 .benefits-text ').removeClass('active');
}, function() {
/*$('.promote-benefits #2 .benefits-text').removeClass('active'); */
});
$("#4 .benefits").hover(function() {
$('.promote-benefits #4 .benefits-text').addClass('active');
$('.promote-benefits #1 .benefits-text,.promote-benefits #2 .benefits-text,.promote-benefits #3 .benefits-text, .promote-benefits #5 .benefits-text ').removeClass('active');
}, function() {
/*$('.promote-benefits #2 .benefits-text').removeClass('active'); */
});
$("#5 .benefits").hover(function() {
$('.promote-benefits #5 .benefits-text').addClass('active');
$('.promote-benefits #1 .benefits-text,.promote-benefits #2 .benefits-text,.promote-benefits #3 .benefits-text, .promote-benefits #4 .benefits-text ').removeClass('active');
}, function() {
/*$('.promote-benefits #2 .benefits-text').removeClass('active'); */
});