How to use Jquery to address individual posts in Wordpress
<p>I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin.</p>

<p><strong>The Structure:</strong></p>

<p>I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post.</p>

<p><strong>What I want to do is:</strong></p>

<ol>
<li><p>when the user hovers over "post" div:</p>

<p><em>".title" spans's background color fades from black to red.</em></p></li>
<li><p>when the user hovers out (OnMouserOut) "post" div:</p>

<p><em>".title" spans's background color fades back to black.</em></p></li>
</ol>

<p><strong>The Code</strong></p>

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

<p><strong>The Problem</strong></p>

<p>The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state?</p>

<p>Any help would be greatly appreciated,</p>

<p>Cheers,</p>

<p>Drew. </p>
