Показать div на img mouseover (jQuery)

Question

Итак, я работаю над эффектом mouseover на изображениях, на которых будет отображаться 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(); 
});