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个事件 - 这实际上是一个＆＃34;悬停＆＃34;事件：

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

<强> DEMO

Answer 2

在定义单个属性时出现错误，您正在使用:。 定义单个属性时，应使用,

// For single property
$("#selector").css("property", "value");

//Define multiple properties
$("#anotherselector").css({
  property1: value1,
  property2: value2,
});

解决方案

使用此

$("#div-one td").mouseover(function() {
    $("#div-two").css("background-color","yellow");
}).mouseout(function() {
    $("#div-two").css("background-color","white");
});

或者，如果您想继续使用.on()方法

$(document).on("hover", "#div-one td", function() {
    $("#div-two").css("background-color", "yellow");
}).on("mouseout", "#div-one td", function() {
    $("#div-two").css("background-color", "white");
});

Demo

Answer 3

尝试：

$("#div-one td").hover(
  function () {
    $("#div-two").css("background-color":"yellow");
  },
  function () {
    $("#div-two").css("background-color":"red"); //or some other color
  }
);

Answer 4

应该

<div id="#div-one">

是

​<div id="div-one">

Answer 5

不要在

中使用'＃'符号

即。 <div id="#div-one">代替<div id="div-one">

使用,

的: insteaf

即。

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

所以内容会是这样的：

<div id="div-one">
<table border="1">
    <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>

你的脚本将是，

$(document).on({
mouseover: function() {
    $("#div-two").css("background-color", "#F9FC02");
},
mouseout: function() {
    $("#div-two").css("background-color", "");
  }
}, "#div-one td");​

Checkout Demo