jQuery .hover 기능이 모든 이미지에 동시에 영향을주지 않도록하려면 어떻게합니까?

Question

제목에서 충분히 잘 설명 할 수는 없지만 매우 짧게 유지하려고했습니다.

그래서 페이지 주위에 여러 이미지가 흩어져 있고 모두 라이트 박스 갤러리가 만들어졌습니다 (.cboxElement는이를 호출하는 클래스입니다). 내가 여기에 추가하고자하는 것은 라이트 박스의 영향을받는 각 이미지에 마우스를 올리면 사용자가 확대 할 수 있음을 알 수 있습니다.

문제 :

내가 사이트에 대한 원래의 코드를 작성하지 않았고이 새로운 기능입니다. 바로이 다음

$("a.cboxElement").each(function(){ 
     $(this).prepend("<span class='zoom'></span>"); 
    }); 

, 나는 호버 효과를 사용했습니다 다음과 같이 이미지에서 클래스의 불일치로 인해, 나는, 참조 할 수있는 호버 방법에 대한 고유 클래스와 각 이미지 전에 태그를 앞에 추가했다 :

$("a.cboxElement").hover(function(){ 
     $("a.cboxElement span").fadeIn('fast'); 
    }, 
    function(){ 
     $("a.cboxElement span").fadeOut('fast'); 
    }); 

문제는 그 페이지에 이미지 위에 마우스를 가져 가면, 호버 효과가 동시에 모든 이미지에 나타납니다 그리고 나는 그것이 내가 유혹하고 있습니다 만 이미지에 영향을 미치는 방법을 알아 작동하지 않을 수 있다는 것입니다 위에.

누구에게 내가 할 수있는 아이디어가 있습니까?

많은 감사,

존

Answer 1

호버 지정 :

$("a.cboxElement").hover(function(){ 
    $(this).find("span").fadeIn('fast'); 
}, 
function(){ 
    $(this).find("span").fadeOut('fast'); 
}); 

원래 코드가 말하길 : 각 a.cboxElement에 대해 a.cboxElement 요소 'span'을 찾아서 페이드 인/페이드 아웃합니다. 위의 코드는 각 a.cboxElement의 경우 호버에서 의 span을 찾고a.cboxElement을 찾아서 페이드 인/아웃합니다.

Answer 2

각 이미지에 id="..." 속성을 지정하고 전체 a.cboxElement 클래스 대신 선택 : 나는 당신이 단지의 범위를 변경할 필요가 있다고 생각

<img id="imageid1" ... > 
$('#imageid1').... 

Answer 3

$("a.cboxElement").hover(function(){ 
    $(this).find('span:first').fadeIn('fast'); 
}, 
function(){ 
    $(this).find('span:first').fadeOut('fast'); 
}); 

Answer 4

또한, 하나의 기능을 .fadeToggle을 사용할 수 있습니다 : 그래서 올바른 장소에 이러는거야 희망이에

$("a.cboxElement").hover(function(){ 
    $(this).find("span").fadeToggle("fast"); 
});