jquery - 动态添加-删除类

Question

<div class='m2Act' id='edu'>Edu</div>
<div class='m2Pass' id='ref.php'>Ref</div>
<div class='m2Pass' id='con.php'>Con</div>
<div style='clear:both'></div>

css

.m2Act, .m2Pass{
    float:left;
    margin:5px;
    cursor:pointer;
}
.m2Act{
 background:yellow;   
}
.m2Pass{
    background:red
}

js

$('.m2Pass').hover(function(){
    $('.m2Act').removeClass().addClass('m2Pass');
    $(this).removeClass().addClass('m2Act');
})

所有这些都有效，但是当光标离开时 - 我需要每个 div 的先前状态。这不会发生。div 仍处于新的悬停状态。我已经尝试过成功mouseenter和mouseleave失败。

小提琴

Answer 1

$('.m2Pass').hover(function(){
    $('.m2Act').removeClass().addClass('m2Pass');
    $(this).removeClass().addClass('m2Act');
},function(){

 // revert the properties in this function

}
)

Answer 2

你应该 ：

• 使用hover()for hover out的第二个参数
• 跟踪您的初始活动项目

更新代码：

<div class='m2Act initial' id='edu'>Edu</div>
<div class='m2Pass' id='ref.php'>Ref</div>
<div class='m2Pass' id='con.php'>Con</div>

$('.m2Pass').hover(
    function(){
        $('.m2Act').removeClass('m2Act').addClass('m2Pass');
        $(this).removeClass('m2Pass').addClass('m2Act');
    },
    function(){
        $('.m2Act').removeClass('m2Act').addClass('m2Pass');
        $('.initial').removeClass('m2Pass').addClass('m2Act');
    }
);

更新小提琴

编辑：
正如西蒙在评论中提到的那样，您可以使用toggleClass()代替removeClass()andaddClass()来简化您的代码：

$('.m2Pass').hover(
    function(){ $('.m2Act').add(this).toggleClass('m2Act m2Pass'); },
    function(){ $('.m2Act, .initial').toggleClass('m2Act m2Pass'); }
);