title: Image onmouseover/onmouseout doesn't change
body: <p>i am trying to achieve an image change when i enter with the mouse cursor inside the container box where the image is placed. Locally everything works perfect but on a demo server for example i have to click inspect element on every box for it to start working and also after i do this sometimes it works and sometimes not. I've added the jquery online library in the head section of my page.  Any ideas? Here is my code:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt; 
        &lt;a href="#"&gt;
          &lt;img src="img/img1.png" onmouseover="this.src='img/img2.png'" onmouseout="this.src='img/img1.png'"  alt="img"&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt; 
        &lt;a href="#"&gt;
          &lt;img src="img/img1.png" onmouseover="this.src='img/img2.png'" onmouseout="this.src='img/img1.png'"  alt="img"&gt;
        &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>