将Dom元素重置为初始状态（jquery/javascript）

因此，我试图在

mouseover

和

mouseout

上添加几个

css

类（红色和收缩）。我已经成功地做到了这一点，但一旦我将鼠标移出容器或焦点区域，

shrink

类仍然存在

如何将所有类重置回原始状态

以下是我目前掌握的代码：

var lis = $('.list');

lis.on('mouseover mouseout', changeColor);

function changeColor (e) {
 $el = e.currentTarget;
 if( e.type == 'mouseover') {
    $el.classList.add('red');
    $el.classList.remove('shrink');
 } else if (e.type == 'mouseout'){
    $el.classList.remove('red');
  $el.classList.add('shrink');
 } 
 else {
    $el.classList.remove('red');
    $el.classList.remove('shrink');
 }
}

谢谢。

这可能有用

var lis=$（'.list'）；
lis.on（'mouseover mouseout'，changeColor）；
函数更改颜色（e）{
$el=e.currentTarget；
如果（e.type=='mouseover'）{
$el.classList.add（'red'）；
$el.classList.remove（'shrink'）；
}else if（e.type=='mouseout'）{
$el.classList=“list”；
} 
}

.list
{ 
高度：50px；
宽度：50px；
背景：绿色；
}
红色
{
背景：红色；
}
收缩
{
背景：黄色；
}

---

使用纯jQuery重构代码。一切正常

    var lis = $('.list');
    lis.hover(function(e){
        e.preventDefault();
        $(this).toggleClass('red')
        .siblings(lis).toggleClass('shrink');
    });

---

当您将jquery用于事件侦听器时，在函数中使用jquery似乎更有意义。即使我使用了jquery，这个问题仍然存在。您希望得到什么？您在鼠标移出时添加

收缩

类，您希望它在鼠标移出时删除所有类吗？