jQuery - target specific element with same class
<p>I'm new to jq to excuse me if I'm not clear enough.</p>

<p>fiddle:</p>

<pre><code>http://jsfiddle.net/tWHpA/1/
</code></pre>

<p>On hover both divs slide up, how an I make it to slide up only the div that's been hovered on?</p>

<p>html:</p>

<pre><code>&lt;div class="span1 green 1"&gt;&lt;div class="hover"&gt;tile title&lt;/div&gt;&lt;a href="#page2" rel="ajax"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div class="green 2"&gt;&lt;div class="hover"&gt;tile1 title&lt;/div&gt;&lt;/div&gt;
</code></pre>

<p>css:</p>

<pre><code>.green {width: 100px; height: 100px; background: red; color: white; position: relative; z-index:100;}      
.hover {width: 100px; height: 50px; background: yellow; position: absolute; bottom:0; display:none; z-index:-1;   }
</code></pre>

<p>jq:</p>

<pre><code>$(document).ready(function() {

    $('.green').addClass('.hover');


   $('.green').hover(function() {

          $('.hover').stop(true, true).slideDown('1000')

    },

    //Mouseout, fadeOut the hover class


    function() {

        $('.hover').stop(true, true).slideUp('1000');

    }).click(function() {

        //Add selected class if user clicked on it
        $(this).addClass('selected');


    });
});
</code></pre>
