Question

所以我想在css和mouseover上添加几个mouseout类（红色和缩小）。我已经成功完成了这项工作，但是一旦我将鼠标移出容器或焦点区域，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');
 }
}

谢谢。

Answer 1

这可能有用。

＆＃13;

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="list";
 } 

}

＆＃13;

.list
{ 
    height:50px;
    width:50px;
    background:green;
}

.red
{
    background : red;
}

.shrink
{
    background:yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list"></div>

＆＃13;

Answer 2

使用纯jQuery重构代码。按预期工作。

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

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

2 个答案: