使用 Jquery 更改 INACTIVE div 类答案

【问题标题】：Use Jquery to change INACTIVE div class使用 Jquery 更改 INACTIVE div 类
【发布时间】：2011-10-13 08:08:02
【问题描述】：

你建议我怎么做？

我有一个菜单，默认情况下突出显示（提供活动类）到 div 列表中的第一个 div。我需要发生的是：当您在父 div 中（列出其他 div，列表）时，有正常的悬停动作。当您离开父 div 时，最后一个突出显示的 div 保持在活动状态。有道理？有点？

这是我目前所拥有的。 catListInner1 是其他分组的父 div。

var aCl = jQuery.noConflict();
aCl(document).ready(function() {

    //takes the initial active class off of the first div. 
aCl("#catListInner1").live({
    mouseenter: function() {
        aCl("#catListInner1 div:first").removeClass().addClass('catListOther');
    }

}); 


aCl(".catListOther").live({
    mouseenter: function(e) {
    //  aCl("#catListInner1 div:first-child").removeClass('catListAct');
        aCl(this).removeClass().addClass('catListAct');
    },
    mouseleave: function(e){
        aCl(this).removeClass().addClass('catListOther');
    },
}); 
});

【问题讨论】：

aCl 而不是 $ 或 jQuery？这太令人困惑了。为什么不把它包装在一个函数中，这样$ 就可以在里面使用了？ (function($){ ... })(jQuery.noConflict());

标签： jquery css hover html mouseover

【解决方案1】：

我不知道我是否理解正确，但是您想要在悬停时突出显示一个元素（在这种情况下为div），并且仅在悬停同一类的另一个元素时才删除此突出显示？如果是这样的话，我会这样做：

$('element').mouseenter(function(){
    $('element.class').removeClass('class');
    $(this).addClass('class');
});

这样做是，从所有元素中删除悬停类，并应用于当前悬停的元素。当鼠标离开当前元素时，什么也没有发生。

【讨论】：

【解决方案2】：

这就是最终为我工作的东西::

var aCl = jQuery.noConflict();
aCl(document).ready(function() {
var currentId

aCl(".catListOther").live({ 
    mouseenter: function(e) {

            aCl('.catListAct').not(aCl(this)).removeClass().addClass('catListOther');
        aCl(this).removeClass().addClass('catListAct');
        currentId = aCl(this).attr('id'); //get the ID of the last div you visited
    }
}); 

aCl(".catListAct").live({
    mouseleave: function(e){
        aCl(this).removeClass().addClass('catListOther');

    },
}); 

aCl('#catList').live('mouseleave', function() {
    aCl("#" + currentId).removeClass().addClass('catListAct'); 
          //when leaving parent div, add the class back to the last div you visited in the list
});
});

【讨论】：