mouseover style change with JQuery
<p>taking the following html:</p>

<pre><code>    &lt;li&gt;
    &lt;p&gt;
    &lt;a href="#" class="link" &gt;&lt;img src="images/photo_cityguild_cropped.jpg" alt="Education" title="Education"&gt;
    &lt;span class="label"&gt;E D U C A T I O N&lt;/span&gt;
    &lt;/a&gt;
    &lt;/p&gt;
    &lt;/li&gt;
</code></pre>

<p>I want to basically change the class of the <code>&lt;span&gt;</code> on the event of the user hovering over the image link.</p>

<p>I haven't got much use of JQuery under my belt and its been a while anyway, I was trying the following:</p>

<pre><code>$(".link").mouseover(function() {
    $(this).find("span").addclass("label2");
  }).mouseout(function(){
    $(this).find("span").removeclass("label2");
  });
</code></pre>

<p>could somebody indicate to me as to what I need to correct as it is currently doing nothing.</p>

<p>thanks,</p>

<p><strong>EDIT</strong> updated with my solution.</p>

<p>implemented this code instead:</p>

<pre><code>$(".link").live("mouseover mouseout", function(event) {
  if ( event.type == "mouseover" ) {
    $(this).find("span").addClass("label2");
  } else {
    $(this).find("span").removeClass("label2");
  }
});
</code></pre>
