jQuery-离开悬停状态 [英] jquery - leaving the hover state

问题描述

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

I have 2 div tag. The first contains a table. The second contains some text. When the page is loaded both div have no background-color. When there is an hover on a td of the first div, the second div background-color is set to yellow (see code below). My problem is that when I leave the table with the mouse, the background of the second div stays yellow. I would like the color to be remove on leaving the hover state. Hope someone can help. Thank you in advance for your replies. Cheers. Marc.

我的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");
});​

推荐答案

分别使用mouseenter和mouseleave事件-实际上是悬停"事件:

Use mouseenter and mouseleave events separately - which is actually a "hover" event:

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

演示

DEMO

这篇关于jQuery-离开悬停状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！