Logic for hovering in jQuery dependent on where mouse hovers

I'm trying to figure out how to write in jQuery a conditional statement on where a user hovers their mouse.

I've already got the logic for a hover function. When a user hovers over a list item "Z", another element (a div with class "box") on the page performs a func开发者_如何学Gotion (namely animates). But on the hover "out" part of the equation (hovering out of list item "Z"), I need to write a conditional statement along these lines:

• When hovering out of list item "Z", if the user then moves their mouse over div ".box", then run function A
• If the user does not move their mouse over div ".box", run function B

Hopefully that's clear enough. Essentially I'm trying to determine where the user hovers next and perform a function accordingly.

---

if you have html like this:

<ul id="someList">
    <li>some list item 1</li>
    <li>some list item 1</li>
    <li>some list item 1</li>
</ul>

you can achieve the desired functionality like this:

$("ul#someList > li").mouseover(function(){
    // the next line will set the background of the hovered element to red
    $(this).css({background: "red"});
}).mouseout(function(){
    // the next line will set the background of the list element to green when the mouse is out
    $(this).css({background: "green"});
});

edit: I think this will be a bit easier to understand

var mouseOverHandler = function() {

    var styleObject = {
        background: "red"
    };

    $(this).css(styleObject);
}

$("ul#someList > li").mouseover(mouseOverHandler);