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但未成功。

FIDDLE

Answer 1

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

 // revert the properties in this function

}
)

Answer 2

你应该：

使用hover()的第二个参数悬停
跟踪您的初始有效项目

更新的代码：

<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');
    }
);

Updated Fiddle

编辑：
正如评论中Simon所述，您可以使用toggleClass()代替removeClass()和addClass()来简化代码：

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

动态添加 - 删除类

2 个答案: