jquery match 이벤트를 발생시킨 div의 자식

특정 이미지에 mouseover 이벤트가있는 경우 각 이미지 위에 div가 표시되는 갤러리/회전식 위젯을 만들려고합니다. 지금까지 내가 사업부 표시하려면이 코드를 가지고 : 정보가 사업부입니다 현명한jquery match 이벤트를 발생시킨 div의 자식

<div id="wrapper"> 
<div id="slides"> 
    <ul> 
     <li> 
     <img class="background" src="images/1.png" width="240" height="240"/> 
      <div class="info">Thats the info of this image</div> 
    </li> 
     <li> 
       <img src="images/ogm.png" width="240" height="240"/> 
        <div class="info">Thats the info of this image</div> 
     </li> 
     <li><img src="images/2.jpg" width="240" height="240"/> 
       <div class="info">Thats the info of this image</div> 
     </li> 
     <li> 
      <img src="images/3.png" width="240" height="240"/> 
       <div class="info">Thats the info of this image</div> 
     </li> 
     <li> 
      <img src="images/4.png" width="240" height="240"/> 
       <div class="info">Thats the info of this image</div> 
     </li> 
     <li> 
      <img src="images/5.png" width="240" height="240"/> 
       <div class="info">Thats the info of this image</div> 
     </li> 
    </ul> 
</div>

$(document).ready(function(){ 

    $(".background").mouseover(function(){ 
    $(".info").show(1500); 
    }); 
    $(".background").mouseout(function(){ 
    $(".info").hide(1500); 
    }); 
});

및 HTML 및 배경 이미지

등의 클래스입니다 어떤 이미지에 마우스 오버가있을 때 모든 정보 div가 일치하고 나타나는 것으로 예상됩니다.

마우스 오버를 트리거 한 배경 이미지에 포함 된 특정 정보 div 만 표시되게 할 수 있습니까?

출처

2012-10-06 ndp

jQuery 바인딩 함수에 제공하는 콜백은 이벤트가 발생한 요소의 컨텍스트 (this)로 제공됩니다. 그래서 당신은 검색 할 수 있습니다 귀하의 '.info'$(this)에서 :

$(document).ready(function(){ 
    $(".background").mouseover(function(){ 
    $(this).parent().find(".info").show(1500); 
    }); 
    $(".background").mouseout(function(){ 
    $(this).parent().find(".info").hide(1500); 
    }); 
});

또는 (레나토의 제안) :

$(document).ready(function(){ 
    $(".background").mouseover(function(){ 
    $(this).parent().find(".info").show(1500); 
    }).mouseout(function(){ 
    $(this).parent().find(".info").hide(1500); 
    }); 
});

참고 또한 가장 자주 mouseenter 필요합니다 JQuery와 체인 허용하는 것이

$(document).ready(function(){ 
    $(".background").mouseover(function(){ 
    $(this).sibblings(".info").show(1500); 
    }); 
    $(".background").mouseout(function(){ 
    $(this).sibblings(".info").hide(1500); 
    }); 
});

주 mouseover 및 mouseout 대신 mouseleave입니다.

출처

2012-10-06 16:26:02

당신은 ['형제()'] 사용할 수 있습니다 (http://api.jquery.com/siblings/) 대신 부모'의().()' –

가 예, 그렇습니다 찾을 수 있습니다. 나는 형제와 함께 다른 버전을 넣을 것이다. –

은 매력처럼 작동합니다 .--) 감사합니다. – ndp

다음 이미지를 사용하면 문제가 해결됩니다.

$(document).ready(function(){ 
    $(".background").mouseover(function(){ 
    $(this).next().show(1500); // show div next to img 
    }); 
    $(".background").mouseout(function(){ 
    $(this).next().hide(1500); // hide div next to img 
    }); 
});

출처

2012-10-06 16:36:29 Anoop

jquery match 이벤트를 발생시킨 div의 자식

답변

관련 문제