How to use Jquery to address individual posts in Wordpress -

i'm designing wordpress theme, , require bit of javascript hover effect. i'm using wordpress jquery + jquery color animations plugin.

the structure:

i use div (class="post") container wordpress post, , within "post" div, have span (class="title") use display title of post.

what want is:

1. when user hovers on "post" div:

   ".title" spans's background color fades black red.

2. when user hovers out (onmouserout) "post" div:

   ".title" spans's background color fades black.

the code

$j(document).ready(function(){     $j(".posts").hover(function(){     $j (".posts .title").animate({ backgroundcolor: "#ff0062" }, 300);     },function(){     $j(".posts .title").animate({ backgroundcolor: "#231f20" }, 300);     });     }); 

the problem

the code works, except when user hovers on "post" div, "title" span change color. question is, how target code address "title" span in "post" div in hover state?

any appreciated,

cheers,

drew.

you need "title" span element descendant of hovered "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);   }); }); 

the this keyword inside 2 handler functions, refer hovered "post" element.

i use context argument of jquery function, same using traversing/find method.