Comment modifier l'arrière-plan div lorsque je souris sur un lien - en utilisant jQuery?

Question

J'ai une image d'arrière-plan sur un div et je voudrais changer sa position du centre vers le bas au centre quand je souris sur le lien qui est dans le div. Je ne parle pas très bien jQuery, je suis un peu comme l'Américain en France, sachant un peu plus que parlez vous, mais voilà.

Voici le code html:

<div class="video-link"> 
<a href="#">Watch the Pack It Videos Now.</a> 
</div> 

Voici le CSS:

.video-link { 
     width: 610px; 
     height: 68px; 
     background: url(../_images/btn_horz-video.png) no-repeat center bottom; 
     margin: 10px 0 10px 50px; 
     } 

.video-link a { 
     color: #000; 
     text-decoration: none; 
     border: none; 
     font-size: 18px; 
     display: block; 
     padding: 25px 0 0 90px; font-weight: bold; }              

Et last but not least, voici le jQuery:

$(".video-link a").hover(function() { 
    $(this).closest(".div").css({ 'background-position': 'top center' }); 
    }, function() { 
    $(this).closest(".div").css({ 'background-position': 'bottom center' }); 
}); 

est ici the page - Il s'agit de l'image Regarder l'emballage de vidéos maintenant à mi-chemin de la page.

Merci.

Answer 1

Dans votre .closest(selector), au lieu de ".div" il vous suffit "div", comme ceci:

$(".video-link a").hover(function() { 
    $(this).closest("div").css({ 'background-position': 'top center' }); 
}, function() { 
    $(this).closest("div").css({ 'background-position': 'bottom center' }); 
}); 

.div est un class selector à la recherche d'un élément class="div", alors que div est un element selector, à la recherche de <div>.

Answer 2

Voir jQuery Mouseover.

Answer 3

Je voudrais juste changer à ceci:

$(".video-link").hover(
    function() 
    { 
     $(this).css({ 'background-position': 'top center' }); 
    }, 
    function() 
    { 
     $(this).css({ 'background-position': 'bottom center' }); 
    }); 

Je l'ai testé sur votre site et cela a fonctionné.

EDIT: Ce que j'ai fait a été enlever le a et juste appliqué le vol stationnaire à la div. Puis j'ai sorti l'appel de méthode le plus proche et j'ai juste appliqué le changement de css à ceci puisqu'il s'applique maintenant à la div. Évidemment, cela ne fonctionnerait pas si d'autres endroits utilisent ce CSS mais je n'en ai vu aucun.