Mouseover/mouseout +: not jquery issue

Question

Я пытаюсь сделать простой контент-скользящий предмет и застрял в написании кода, возможно, для простейшего материала - наведение курсора для навигационной части слайдера. Я хочу, чтобы это было так, что когда один из div с информацией о слайде был нажат, наведение не работает для него, но работает для двух других div.

Я пробовал классы и идентификаторы для щелкнутого div, но ничего не работает, когда я добираюсь до части наведения. Я пытаюсь использовать: не фильтровать, чтобы выбрать два других div, или все три, те, которые не были #clicked. Но выбора не так много - независимо от того, что, зависание работает для всех трех div. Я пробовал использовать: не с другими функциями, такими как hide(), и все работает отлично. Так это проблема специфичности CSS? Или это что-то не так с mouseover/mouseout? Или, может быть, со мной, как быть некомпетентным дураком?

Вот мой HTML:

<div id="linkswrapper"> 
    <div> 
    <a>Slide 1</a> 
    <p>Slide info 1.</p> 
    </div> 
    <div> 
    <a>Slide 2</a><p>Slide info 2.</p> 
    </div> 
    <div> 
    <a>Slide 3</a> 
    <p>Slide 3 info.</p> 
    </div> 
</div> 

Вот код JQuery:

// adds href="#" to all links in "linkswrapper" div 
$("#linkswrapper div a").attr({href: "#"}); 

// this handles clicks on the divs. When clicked, the div is assigned 
// "clicked" id, and the id attribute is removed from the other sibling divs 
$("#linkswrapper div").click(function() { 
    $(this).attr({id:"clicked"}); 
    $("#linkswrapper div").not(this).each(function(){ $(this).removeAttr("id"); }); 
}); 

// handling the mouseover/mouseout. Hover should be working on all the three divs 
// if neither of them has been clicked on or only on the two other divs if one 
// of the three has been clicked on 
$("#linkswrapper div:not(#clicked)").mouseover(function() { 
    $("a", this).css("border-color","#0066FF"); 
    $("p", this).css("color","#0066FF"); 
}).mouseout(function(){ 
    $("a", this).css("border-color","#e3e3e3"); 
    $("p", this).css("color","#cccccc"); 
}); 

Answer 1

события назначаются при загрузке страницы и назначаются в соответствии с текущим состоянием элементов, по сравнению с селектор.

Таким образом, обработчик назначается всем им, потому что ни один из них не имеет идентификатора #clicked. Обработчики остаются на месте, если вы не удалите их.

Другим подходом было бы использовать .live() или .delegate(), чтобы селекторы считались динамически по мере возникновения событий.

Попробуйте:http://jsfiddle.net/neGgz/

$("#linkswrapper div:not(#clicked)").live('mouseover', function() { 
    $("a", this).css("border-color","#0066FF"); 
    $("p", this).css("color","#0066FF"); 
}).live('mouseout', function(){ 
    $("a", this).css("border-color","#e3e3e3"); 
    $("p", this).css("color","#cccccc"); 
}); 

• http://api.jquery.com/live/

Альтернативный подход:

• http://api.jquery.com/delegate/

---

EDIT:

Или вы можете использовать hover событие с .live():

Попробуйте это:http://jsfiddle.net/neGgz/1/

$("#linkswrapper div:not(#clicked)").live('hover', function(e) { 
    if(e.type == 'mouseover') { 
     $("a", this).css("border-color","#0066FF"); 
     $("p", this).css("color","#0066FF"); 
    } else { 
     $("a", this).css("border-color","#e3e3e3"); 
     $("p", this).css("color","#cccccc"); 
    } 
});​ 

---

EDIT:

Или вот хорошая короткая версия с использованием классов:

Попробуйте:http://jsfiddle.net/neGgz/2/

$("#linkswrapper div:not(#clicked)").live('hover', function(e) { 
    $("a,p", this).toggleClass('hovering'); 
}); 

Answer 2

Вместо .mouseover() и .mouseout() вы хотите использовать mouseneter и mouseleave с .delegate() здесь, например:

$("#linkswrapper").delegate("div:not(#clicked)", "mouseenter", function() { 
    $("a", this).css("border-color","#0066FF"); 
    $("p", this).css("color","#0066FF"); 
}).delegate("div:not(#clicked)", "mouseleave", function(){ 
    $("a", this).css("border-color","#e3e3e3"); 
    $("p", this).css("color","#cccccc"); 
}); 

Тогда проблема заключается в селекторе: $("#linkswrapper div:not(#clicked)") находит все <div> в #linkswrapper, которые не id="clicked"в то время, если идентификатор приходит и уходит позже, что не влияет на тот факт, что события мышей были уже связаны к элементу (а не селектор) ранее. Использование .delegate() прослушивает событие для пузырьков и проверяет селектор , когда событие происходит, поэтому оно будет дифференцироваться, если элемент в настоящее время имеет идентификатор или нет.

В mouseover к mouseenter и mouseout к mouseleave изменения, потому что прежние события будут происходить при входе/выходе ребенка, а также, что вы обычно не хотят.

---

Как примечание стороны, это не может быть проще, так как хорошо, нет необходимости в .each():

$("#linkswrapper div").click(function() { 
    $(this).attr({id:"clicked"}); 
    $("#linkswrapper div").not(this).each(function(){ $(this).removeAttr("id"); }); 
}); 

Как это:

$("#linkswrapper div").click(function() { 
    $(this).attr({id:"clicked"}); 
    $("#linkswrapper div").not(this).removeAttr("id"); 
}); 

You can try both improvements in a demo here :)