Making js activate divs sepratly
<p>i am new to JS and need some help please!</p>

<p>I have 2 Boxes(divs) that have a slider in each one. When I mouse over anyone of them, both sliders are activated.</p>

<p>How would i make it so each div is activated separately.</p>

<p>here are my pictures of what I am doing, might make it a little more clear:</p>

<p><strong>pic.twitter.com/1ju3iZ0KIM - before mouse over
pic.twitter.com/gmfhl1zl2J - with mouse over</strong></p>

<p>Thanks so much!  </p>

<p>This is my JS</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
        $('.up-down').mouseover(function(){
            $('.default').stop().animate({
                height: 0  
            }, 200);                        
        }).mouseout(function(){
            $('.default').stop().animate({
                height: 170 
            }, 200)    
        })
    });
&lt;/script&gt;
</code></pre>

<p>my divs</p>

<pre><code>&lt;div class="squareFeedBox"&gt;
    &lt;div class="up-down"&gt;
        &lt;div class="slide default"&gt;&lt;/div&gt;
        &lt;div class="slide onhover"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="squareFeedBox"&gt;
    &lt;div class="up-down"&gt;
        &lt;div class="slide default"&gt;&lt;/div&gt;
        &lt;div class="slide onhover"&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>My css</p>

<p>/<em>Content Boxes</em>/</p>

<pre><code>.squareFeedBox
{
    background-color: #fff;
    width: 278.5px;
    height: 207px;
    margin-right: 16px;
    margin-bottom: 16px;
    float: left;
    border-radius: 3px;
    box-shadow: 2px 2px 5px #0f2134;
    overflow: hidden;
}

/*upSlider*/

.up-down 
{
    overflow:hidden;
    height: 207px;
    width: 278.5px;
}

.slide 
{
    width:278.5px;
    height:207px;
}



.default 
{
    background-color:#fff;
    height: 170px;
    width: 278.5px;
}

.onhover 
{
    background-color:#1DB7CB;
    height: 207px;
    width: 278.5px;  
}
</code></pre>
