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.
精彩评论