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

Question

Je dois pouvoir changer la position d'une image d'arrière-plan dans un div contenant quand je souris sur un lien dans cette div.

Voici le page: Ce sont les deux boutons de lecture bleus à mi-droite.

Je l'avais travaillé auparavant mais il est cassé et je n'arrive pas à le faire fonctionner correctement.

Voici le code html:

<div class="h-video"> 
<p><a class="play-video" href="#flashArea3">Secondary headline goes here to say something you want. This needs to grab their attention.</a></p> 
</div> 

Voici le jQuery:

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

Je vous serais reconnaissant toute aide.

Merci.

Answer 1

Pourquoi utiliser javascript? Vous pouvez le faire en CSS seul, bien que IE6 ne le supporte pas sur un élément <div>.

Exemple:http://jsfiddle.net/yr4yH/1/

CSS de l'exemple ci-dessus:

.h-video { 
    width: 461px; 
    height: 67px; 
    background-image: url("http://www.theideapeople.com/projectpath/ideapeople-new/_images/btn_video-home.png"); 
    background-position: bottom center; 
    background-repeat: no-repeat 
} 

.h-video:hover { 
    background-position: top center; 
}​ 

Si vous avez besoin pour soutenir IE6, je suis sûr que vous pouvez retravailler votre mise en page si .h-video est un élément <a> place d'un <div>.

Answer 2

Je vais laisser une réponse distincte pour cette solution, mais je dirais encore à use CSS instead of javascript.

Votre code qui affecte ensuite les gestionnaires avec .hover() est en cours d'exécution avant le chargement des éléments. Sinon, votre code est correct.

L'exemple de code ci-dessous encapsule votre code avec $(function() { ... }); qui est un raccourci pour jQuery's .ready() method, ce qui garantit que le document est chargé avant l'exécution de votre code.

// Wrap your code like this so it doesn't run until the DOM is ready 
$(function() { 
    $(".h-video").hover(function() { 
    $(this).closest("div").css({ 'background-position': 'top center' }); 
     }, function() { 
    $(this).closest("div").css({ 'background-position': 'bottom center' }); 
    }); 
}); 

En outre, jQuery's .closest() method n'est pas nécessaire, mais il ne fait pas mal non plus. Pourrait aussi bien l'enlever.

Answer 3

Couple de notes:

1. Vous avez les positions inversées: ref "top centre" non "centre supérieur" et "bas centre" non "en bas au centre": http://www.w3schools.com/css/pr_background-position.asp

2. utilisation addClass et RemoveClass. Ne définissez pas les styles en ligne. Utilisez-le comme l'exemple sur docs.jquery.com.

3. Si vous n'avez pas besoin du support IE, utilisez la déclaration CSS sans javascript.