mouseOver event Problem with jQuery
<p>HI,</p>

<p>im building a menu where hover on li a .li_bcg is appearing. Unfortunately no matter what ill do, when hover over menu all li_bcg appearing at this same time.</p>

<p>This is my URL to maybe make it a bic clearer</p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;
     &lt;a href="#"&gt;Text&lt;/a&gt;
     &lt;div class="li_bcg"/&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;a href="#"&gt;Text&lt;/a&gt;
     &lt;div class="li_bcg" /&gt;
    &lt;/li&gt;
    &lt;li&gt;
     &lt;a href="#"&gt;Text&lt;/a&gt;
     &lt;div class="li_bcg" /&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And my function</p>

<pre><code>var bcg = $('.li_bcg')

    $.each($('li a'), function(){
          $('li a').mouseover(

           function(){bcg.each(function(){$(this).stop().animate( {'opacity' : 0} ,200)})}

            ),
           $('li a').mouseout(

           function(){bcg.each(function(){$(this).stop().animate( {'opacity' : 1} ,200)})}          
            )
             })
</code></pre>

<p>Thank you for your help in advance</p>
