jquery - 离开悬停状态

Question

我有 2 个 div 标签。第一个包含一个表。第二个包含一些文本。当页面加载时，两个 div 都没有背景颜色。当鼠标悬停在第一个 div 的 td 上时，第二个 div 背景颜色将设置为黄色(请参见下面的代码)。我的问题是，当我用鼠标离开表格时，第二个 div 的背景保持黄色。我希望在离开悬停状态时删除颜色。希望有人能帮忙。预先感谢您的回复。干杯。马克。

我的 HTML :

​<div id="div-one">
    <table>
        <tr><td>1</td><td>2</td></tr>
        <tr><td>3</td><td>4</td></tr>
        <tr><td>5</td><td>6</td></tr>
        <tr><td>7</td><td>8</td></tr>                   
    </table>
</div>

​<div id="div-two">
    some text
</div>

我的JS:

$(document).on("hover", "#div-one td", function() { 

    $("#div-two").css("background-color":"yellow");
});​

Answer 1

分别使用 mouseenter 和 mouseleave 事件 - 这实际上是一个“悬停”事件:

$(document).on({
    mouseenter: function() {
        $("#div-two").css("background-color", "yellow");
    },
    mouseleave: function() {
        $("#div-two").css("background-color", "");
    }
}, "#div-one td");​

<强> DEMO