Question

I want to highlight a dom object using jquery. I found out a way using effect from jquery ui:

$('#foo').hover(function(){$('#bar').effect("highlight");});

but this takes effect only when the mouse move in/out to #foo. I want the effect to sustain during when the mouse is over #foo, and get back to before when the mouse leaves. I tried, this:

$('#foo').mouseover(function(){$('#bar').effect("highlight");});

but still does not work. How can I make the effect sustain?

Answer 1

You can use mouseenter and mouseleave to add effects to add a class to you element.
Sample:
HTML:

<div id="foo">
    <p>Hello world</p>
</div>

JS:

$('#foo').mouseenter(function(){$(this).addClass("highlight");});
$('#foo').mouseleave(function(){$(this).removeClass("highlight");});

CSS:

.highlight{
    background-color: red;
}

Fiddler:
http://jsfiddle.net/2CL7u/

You can also make this effect with pure HTML and CSS like this:
HTML:

<div id="foo">
    <p>Hello world</p>
</div>

CSS:

#foo:hover{
    background-color: red;
}

Fiddler:
http://jsfiddle.net/7Qq7n/