img mouseover에서 div 표시 (jquery)

Question

그래서 div의 텍스트를 표시하는 이미지에 마우스 오버 효과를 적용하고 있습니다. 나는 모든 CSS가 설정되어 있지만 Jquery에 문제가 있습니다. Wordpress 테마에서이 인라인을 사용하고 있습니다. 내 문제가 될 수 있는지 궁금합니다.

<script type="text/javascript" src="scripts/jquery.js"></script> 
<script type="text/javascript"> 
    $(".imgHover").hover(function() { 
     $(this).children("img").fadeTo(200, 0.25) 
     .end().children(".hover").show(); 
    }, function() { 
     $(this).children("img").fadeTo(200, 1) 
     .end().children(".hover").hide(); 
    }); 
</script> 

<div class="imgHover"> 
    <div class="hover">Test Content for the hover</div> 
    <img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="" /> 
</div> 

나를 도와 줄 수있는 사람이 있습니까?

Answer 1

는 $(document).ready에 코드 랩 :

$(document).ready(function() { 
    $(".imgHover").hover(function() { 
     $(this).children("img").fadeTo(200, 0.25).end() 
      .children(".hover").show(); 
    }, function() { 
     $(this).children("img").fadeTo(200, 1).end() 
      .children(".hover").hide(); 
    }); 
}); 

또는 event delegation를 사용

$(document).on("mouseover",".imgHover",function() { 
    $(this).children("img").fadeTo(200, 0.25).end() 
      .children(".hover").show(); 
}).on("mouseleave",".imgHover", function() { 
    $(this).children("img").fadeTo(200, 1).end() 
      .children(".hover").hide(); 
});