Comment utiliser Jquery pour adresser des messages individuels dans Wordpress

Question

Je suis en train de concevoir un thème wordpress, et j'ai besoin d'un peu de javascript pour un effet de survol. J'utilise le plugin Wordpress Jquery + Jquery Color Animations.

Structure:

J'utilise un div (class = "post") en tant que conteneur pour le poste wordpress, et dans le "post" div, j'ai une durée (class = "title") que j'utilise pour afficher le titre du message.

Ce que je veux faire est:

1. lorsque l'utilisateur passe au-dessus "post" div:

   ".title" couleur de fond pour travées se fane du noir au rouge.

2. lorsque l'utilisateur passe à (OnMouserOut) "post" div:

   ".title" couleur de fond de travées esquives au noir.

Le code

$j(document).ready(function(){ 
    $j(".posts").hover(function(){ 
    $j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300); 
    },function(){ 
    $j(".posts .title").animate({ backgroundColor: "#231F20" }, 300); 
    }); 
    }); 

Le problème

Le code fonctionne, sauf lorsque l'utilisateur passe au-dessus tout "post" div, tout changement span "titre" couleur . Donc ma question est, comment puis-je cibler le code pour adresser SEULEMENT le "titre" span dans le div "post" qui est dans l'état stationnaire?

Toute aide serait grandement appréciée,

Cheers,

Drew.

Answer 1

Vous devez obtenir l'élément « titre » span qui est un descendant du moment plané « post »:

$j(document).ready(function(){ 
    $j(".posts").hover(function(){ 
    $j(".title", this).animate({ backgroundColor: "#FF0062" }, 300); 
    // or $j(this).find(".title") 
    },function(){ 
    $j(".title", this).animate({ backgroundColor: "#231F20" }, 300); 
    }); 
}); 

Le mot-clé this à l'intérieur des deux même des fonctions de gestionnaire, reportez-vous à l'heure actuelle a plané « post "élément.

J'utilise l'argument context du jQuery function, qui est exactement le même que d'utiliser la méthode Traversing/find.