triggering mouseover event via cursor key menu navigation

Bit of a complex scenario here.

I have an embeded SVG graphic that will be altered by changes made to the parent HTML document. I have a text box and as you type a search into it, it will populate an ajax UL list. Navigation can be either selected via mouse or cursor key up and down. Selecting an item via return or mouseclick.

All these work well. I have added a method when a menu item is hovered over with the mouse, it will display the desired result in the SVG document.

I am doing this via a onmouseover event added to the li when it is generated in the PHP ajax call.

?><li class="<?=searchClass?>" onClick="win.hidePopup(); document.getElementById('<?=$field?>').value = '<?=$line->textName?>';"  onMouseOver="svgCreateCircle(<?=$x?>,<?=$y?>,'red','<?=$line->textName?>');"><?=$img?><?=$line->textName?></li>
<?

The onmouseover has to be added at this point as it is from here that I am passing parameters (x,y,text, colour) to the SVG document so it knows what to place and where so I can't use the jquery method to dynamically attach a mouseover event.

The issue I have is getting the keyboard navigation to do the same thing as the mouse navigation. moving the mouse ove开发者_如何学Pythonr the li element will display perfectly the result in the graphic, but navigating with cursor keys does not. I get all the background changes etc simulating a mouseover but not the mouseover event it's self. Attempting to triger the event does nothing either.

I have used :

$("ul#itemSearchlist li").eq(menuitem).mouseover();
$("ul#itemSearchlist li").eq(menuitem).trigger('mouseenter');
$("ul#itemSearchlist li").eq(menuitem).trigger('hover');

but none of those work

It may be necessary to abstract this out so that you are no longer relying on the mouseover event to keep track of changes in the selection state, and instead keep track of the selection state yourself in JavaScript. The idea is that you would keep track of which item is selected (the state), and register event handlers to update the state. So, on the mouseover event, you update the mouseover event target, and execute the desired action (creating the circle). In the case of keyboard events, you would be able to retrieve the previous and next list items via DOM, on up keypress and down keypress, respectively. After updating the state to the previous or next list item, you would be able to again perform the desired action of creating the circle based on the updated selection state.