Jquery hover is not working
<p>I'll try to explain as much as possible, i just want to change the src of img tag when mouse is over it{on Hover}; the html is</p>

<pre><code>&lt;ul id="nav-tabs" data-tabs="tabs"&gt;
  &lt;li id="test" style="list-style: none;" class="active"&gt;
   &lt;a href="#home" data-toggle="tabs" &gt;&lt;img src="assets/img/button_home_selected3.png" id="test2"  width="83"/&gt;&lt;span  s&gt;Home&lt;/span&gt;&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>the li tags are dynamically added using script</p>

<pre><code>$('.plus').click(function(e) {
 e.preventDefault();
 var li_count = $('#nav-tabs').length;
 if (li_count &lt;= 3){
  if(counter &lt;= 3){
   $('#nav-tabs').append('&lt;li id="test" &gt;&lt;a href="#tab' + counter + '" data-toggle="tabs" &gt;&lt;img src="assets/img/button_home_plain1.png" width="83" id="test2"&gt;Tab' + counter + '&lt;/span&gt;&lt;button type="button" class="close"&gt;&amp;times;&lt;/button&gt;&lt;/a&gt;&lt;/li&gt;');
} else { alert("Only 3 Tabs Allowed!")};
}
</code></pre>

<p>also there is one active tag which toggles between the tabs, which is done using script</p>

<pre><code>$('li#test').each(function() {
if($(this).hasClass('active'))
 {//Active class is applied
  $(this).children().children().attr("src", "assets/img/button_home_selected3.png");
 }
 else
 {
  $(this).children().children().attr("src", "assets/img/button_home_plain.png");
 }
</code></pre>

<p>});</p>

<p>I have tried something but it is not working, may be i am misplacing it somewhere, ijust dont know</p>

<pre><code>$('#test2').hover(function(e) {
  e.preventDefault();
  if ($(this).attr('src') == 'assets/img/button_home_plain1.png')
  {
   $(this).attr('src','assets/img/button_home_mouseOver1.png');
  }
}); 
</code></pre>
