Javascript 如何在鼠标悬停但离开鼠标时将类添加到元素中

我无法解决悬停元素时必须向元素添加活动类的问题，但悬停到其他元素（其他部分等）时，该类必须保留在悬停的最后一个元素上。第一个块必须作为默认状态处于活动状态

<div class="work-elem">
<div class="work-elem">
<div class="work-elem">
<div class="work-elem">

$(".work-elem:first").addClass("active");
    $(".work-elem").each(function() {
        $(".work-elem").hover(function() {
            $(this).removeClass("active");
            $(this).addClass("active");
        },
        function() {
            $(this).removeClass("active");
        });
    });

$（“.workelem:first”）.addClass（“活动”）；
$（“.work elem”）。每个（函数（）{
$（“.work elem”）.hover（函数（）{
$（此）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
},
函数（）{
$（此）.removeClass（“活动”）；
});
});

使用

mouseenter

和

mouseleave

而不是

悬停

：

$（“.workelem:first”）.addClass（“active”）；
$（“.work elem”）。每个（函数（）{
$（“.work elem”）.mouseenter（函数（）{
$（此）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
}).mouseleave（函数（）{
$（此）.removeClass（“活动”）；
});
});
.active{
颜色：绿色；
}

使用
mouseenter
和
mouseleave
而不是
悬停
怎么样


$（“.workelem:first”）.addClass（“active”）；
$（“.work elem”）。每个（函数（）{
$（“.work elem”）.mouseenter（函数（）{
$（此）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
}).mouseleave（函数（）{
$（此）.removeClass（“活动”）；
});
});
.active{
颜色：绿色；
}

那么
$（“.workelem”）.mouseover（函数（）{
$（“.work elem”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
div{
宽度：20px；
}
.主动{
颜色：红色；
}

1111
2222
3333
4444
$（“.workelem”）.mouseover（函数（）{
$（“.work elem”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
});
div{
宽度：20px；
}
.主动{
颜色：红色；
}

1111
2222
3333
4444