title: How to change the src's value by jquery?
body: <p>the html structure:</p>
  
  <pre><code>&lt;div class="myimages"&gt;
     &lt;div id="mainimg"&gt;&lt;img src="images/Pic/1.jpg"&gt;&lt;/div&gt;
     &lt;div id="addimg"&gt;
        &lt;li class="addimg"&gt;&lt;img src="images/Pic/1_01.jpg"&gt;&lt;/li&gt;
         &lt;li class="addimg"&gt;&lt;img src="images/Pic/1_02.jpg"&gt;&lt;/li&gt;
          &lt;li class="addimg"&gt;&lt;img src="images/Pic/1_03.jpg"&gt;&lt;/li&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How to change the img src's value(which in <code>&lt;div id="mainimg"&gt;</code> ) when the mouse hover on the li which in <code>addimg</code> by jquery.namely, when the mouse hover on the  second li,    <code>&lt;div id="mainimg"&gt;&lt;img src="images/Pic/1.jpg"&gt;&lt;/div&gt;</code> will change to    <code>&lt;div id="mainimg"&gt;&lt;img src="images/Pic/1_02.jpg"&gt;&lt;/div&gt;</code>. when on the first or the third li. the change is the same. thank you</p>