Use Jquery to change INACTIVE div class

How would you suggest I go about this?

I have a menue that by default highlights (gives the active class) to the first div in a list of divs. What I need to happe开发者_如何学JAVAn is this: while you are within the parent div (that lists the other divs, the list) there is normal hover action. When you leave the parent div the last highlighted div stays in the active state. Make sense? Kinda?

Here is what I have so far. catListInner1 is the parent div where the others are grouped.

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

---

I don't know if I understand this right, but what you want is to highlight an element on hover (div in this case), and only remove this highlight if you hover another element of the same class? If that's the case, here's what I'd do:

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

What this does is, remove the hover class from all elements, and apply to the currently hovering element. When the mouse leaves the current element, nothing happens.

---

this is what ended up working for me::

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