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

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

0 голосов
/ 26 июля 2011

Как бы вы посоветовали мне пойти по этому поводу?

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

Ответы [ 2 ]

1 голос
/ 26 июля 2011

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

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

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

0 голосов
/ 27 июля 2011

вот что у меня получилось :: 

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