Используйте Jquery для изменения НЕАКТИВНОГО класса div

Как бы вы предложили мне сделать это?

У меня есть меню, которое по умолчанию выделяет (дает активный класс) первый 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');
    },
}); 
});

html jquery css hover mouseover
person Ortal    schedule 26.07.2011    source источник
comment
aCl вместо $ или jQuery? Это очень сбивает с толку. Почему бы просто не обернуть его в функцию, чтобы $ можно было использовать внутри? (function($){ ... })(jQuery.noConflict());   -  person ThiefMaster    schedule 26.07.2011

Ответы (2)


arrow_upward
1
arrow_downward

Я не знаю, правильно ли я это понимаю, но вы хотите выделить элемент при наведении (в данном случае div) и удалить это выделение только при наведении курсора на другой элемент того же класса? Если это так, вот что я бы сделал:

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

Что это делает, так это удаляет класс зависания из всех элементов и применяет его к текущему элементу зависания. Когда мышь покидает текущий элемент, ничего не происходит.

person Thor Jacobsen    schedule 26.07.2011

arrow_upward
0
arrow_downward

это то, что в итоге сработало для меня::

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
});
});
person Ortal    schedule 27.07.2011