title: changing image on mouseover
body: <p>I have the following HTML: </p>
  
  <pre><code>&lt;div id="bullets"&gt; 
    &lt;ul id="intrebari"&gt; 
      &lt;li&gt; &lt;img src="images/bullet.png" class="li-icon"&gt; &lt;a href="#"&gt; Frequently Asked Questions &lt;/ a&gt; &lt;/ li&gt; 
      &lt;li&gt; &lt;img src="images/bullet.png" class="li-icon"&gt; &lt;a href="#"&gt; custumer Support &lt;/ a&gt; &lt;/ li&gt; 
      &lt;li&gt; &lt;img src="images/bullet.png" class="li-icon"&gt; &lt;a href="#"&gt; custumer Login &lt;/ a&gt; &lt;/ li&gt; 
    &lt;/ ul&gt; 
  &lt;/ div&gt; 
  </code></pre>
  
  <p>Using Jquery I want to change the image of each individual <code>&lt;li&gt;</code> when mouse on it. 
  So far i  manage this:</p>
  
  <pre><code>$(document).ready(function() {
      $('#intrebari&gt;li a').mouseover(function() {
          $(this).css('color: red')
          $('li &gt; img').attr('src', 'images/bulletactive.png');
      });
  });
  </code></pre>
  
  <p>But doing so it change the image on all <code>&lt;li&gt;</code></p>
  
  <p>I know it can be dune</p>
  
  <p>Can someone help</p>