mouseover style change with JQuery

taking the following html:

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

I want to basically change the class of the <span> on the event of the user hovering over the image link.

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

$(".link").mouseover(function() {
    $(this).find("span").addclass("label2");
  }).mouseout(function(){
    $(this).find("span").removeclass("label2");
  });

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

thanks,

EDIT updated with my solution.

implemented this code instead:

$(".link").live("mouseover mouseout", function(event) {
  if ( event.type == "mouseover" ) {
    $(this).fi开发者_如何转开发nd("span").addClass("label2");
  } else {
    $(this).find("span").removeClass("label2");
  }
});

---

Yes, the problem is with the method that you have called. It should be as suggested as above i.e. addClass and removeClass.

Also, i think you can refactor the code using hover event

$(".link").hover(function() {
  $(this).find("span").toggleClass("label2");
});

---

You have a syntax error. It's

addClass()

and

removeClass()

With uppercase 'C'.

---

I would suggest .hover() instead of mouseover/out, and find('span') instead of children('span')

---

addClass and removeClass

notice the camelCasing

---

JavaScript functions are case sensitive.

In this case .addclass should be .addClass and .removeclass should be .removeClass

fiddle: http://jsfiddle.net/Uq67C/1/

EDIT:

Your CSS is looking for elements with the class label and label2 inside an element with an ID of menu. Something like:

<ul id="menu">   
<li>
    <p>
    <a href="#" class="link" ><img src="images/photo_cityguild_cropped.jpg" alt="Education" title="Education">
    <span class="label">E D U C A T I O N</span>
    </a>
    </p>
    </li>
</ul>

should work.