Таргетинг на конкретные дивизионы

Question

Хорошо, что я пытаюсь понять, как использовать JQuery, чтобы выяснить, какие div в настоящий момент выбрано, выделено и т. д., а затем применить код к этому div,

Например, у меня есть три divвыстроились в ряд. каждый div имеет class из .box, Внутри каждого div Другой div с классом .overlay, По умолчанию .overlay установлен в display: none;, но когда я наведите курсор мыши на каждый div Я хочу наложить на это div ТОЛЬКО чтобы установить, чтобы стать видимым - все остальные divНаложение должно оставаться скрытым.

Посмотрите, http://jsfiddle.net/j76s2/

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

Answer 1

Вы можете использовать .hover() событие, которое принимает две функции, одну для hoverin и одну для hoverout. И тогда вы можете использовать this как контекст для текущего зависшего .box элемент, чтобы найти .overlay в нем, а затем использовать .hide() а также .show() изменить его видимость.

$(".box").hover(
    function(){$(this).find(".overlay").show()},
    function(){$(this).find(".overlay").hide()}
);

Рабочая демонстрация: http://jsfiddle.net/jfriend00/wa5Bn/

Вы также можете использовать fadeIn() а также fadeOut() как это:

$(".box").hover(
    function(){$(this).find(".overlay").stop(true, true).fadeIn(500)},
    function(){$(this).find(".overlay").stop(true, true).fadeOut(500)}
);​

Рабочая демонстрация: http://jsfiddle.net/jfriend00/4qeqm/

Answer 2

Вам просто нужно обратиться к конкретному элементу с this:

$(".box").mouseover(function(){
    $(".overlay", this).css({"display" : "block"});
});

$(".box").mouseleave(function(){
    $(".overlay", this).css({"display" : "none"});
});

Таким образом, вы сужаете выбор до .box элемент, содержащийся внутри скрытого элемента.

Также рассмотрите возможность использования .hide() а также .show() вместо .css(),

Answer 3

Вы меняете CSS для всех элементов с помощью .overlay учебный класс. Чтобы просто повлиять на ту, над которой вы сейчас находитесь, вы должны использовать $(this) выбрать текущий элемент, а затем find() чтобы найти класс, который содержится в нем.

$(".box").mouseover(function(){
    $(this).find(".overlay").css({"display" : "block"});
});

$(".box").mouseleave(function(){
    $(this).find(".overlay").css({"display" : "none"});
});