在 jQuery 中悬停的逻辑取决于鼠标悬停的位置

Question

我试图弄清楚如何在 jQuery 中编写一个关于用户将鼠标悬停在何处的条件语句。

我已经掌握了悬停功能的逻辑。当用户将鼠标悬停在列表项“Z”上时，页面上的另一个元素（具有类“box”的 div）执行一个功能（即动画）。但是在等式的悬停“out”部分（悬停在列表项“Z”之外），我需要按照以下几行编写条件语句：

• 当悬停在列表项“Z”之外时，如果用户随后将鼠标移动到 div“.box”上，则运行函数 A
• 如果用户没有将鼠标移到 div ".box" 上，则运行函数 B

希望这已经足够清楚了。本质上，我试图确定用户接下来悬停的位置并相应地执行功能。

Answer 1

如果你有这样的html：

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

您可以像这样实现所需的功能：

$("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"});
});

编辑：我认为这会更容易理解

var mouseOverHandler = function() {

    var styleObject = {
        background: "red"
    };

    $(this).css(styleObject);
}

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