I'm trying to change the background color of a div on mouseover and mouseout. Instant change to yellow on MouseOver, and slow fade on MouseOut.

function hilightel(keydiv)
{
$('#'+keydiv).animate({ backgroundColor: '#ffffd3' },1);
}
function lolightel(keydiv)
{
$('#'+keydiv).animate({ backgroundColor: '#ffffff' },300);
}

< div onMouseOver=javascript:highlightel('item1'); onMouseOut=javascript:lolightel('item1'); id='item1'>CONTENT< /div>

When the mouse moves over text within the div, though, it thinks I've moused-out and so flickers badly.

Alternatives that don't work:
- animateToClass doesn't support background-color so I'm using the 'color' plugin
- I hear that switchClass doesn't work in Chrome
- Can't use .hover because their will be dynamically named divs in the page so need a general function

Thanks in advance...