If you want to use live, you could do the following using .toggleClass()
, .mouseover()
& .mouseout()
:
$(".content").live("mouseover mouseout", function() {
$(this).toggleClass("highlight");
});
See a demo here
Update: I couldn't leave this one, so carried on messing with your example - after the comment you use the functions in other places. So here is what I found:
Instead of calling .mouseout()
use .mouseleave()
- for some reason .mouseout()
get's called multiple times when the mouse moves round - it even gets called when the mouse first enters the object..... See the demo at the end to see what i mean here
Secondly, the .delay()
isn't really being used correctly here - it is really meant for queuing effect's - but what you really want is to add a delayed function (albeit it is an effect that you are after) so instead use the .setTimeout()
to do the call for you.
As per the doc's:
The .delay()
method is best for
delaying between queued jQuery
effects. Because it is limited—it
doesn't, for example, offer a way to
cancel the delay — .delay()
is not a
replacement for JavaScript's native
.setTimeout()
function, which may be more
appropriate for certain use cases.
So the finished functions would look like this:
function highlight(_event) {
$(this).addClass("Highlighted");
}
function unhighlight(_event) {
var obj = $(this);
setTimeout(function() {
obj.removeClass("Highlighted");
}, 2000);
}
$(document).ready(function() {
$(".Content").live('mouseenter', highlight);
$(".Content").live('mouseleave', unhighlight);
});
See the demo here this one will show you what I mean about the .mouseout()
event being fired multiple times, where as the .mouseleave()
function is only called once when the mouse actually leaves.
Note: use your enter button to press the alert ok, don't move your mouse!!
See the demo here to see the final version working here as close to your original as possible.