jquery – 离开hover状态

我有2个div标签。 第一个包含一个表。 第二个包含一些文字。 加载页面时，两个div都没有背景色。 当第一个div的td上有hover时，第二个div背景颜色设置为黄色（参见下面的代码）。 我的问题是当我用鼠标离开桌子时，第二个div的背景保持黄色。 我希望在离开hover状态时删除颜色。 希望有人能提供帮助。 提前感谢您的回复。 干杯。 渣。

我的HTML：

​
 
 
1
2
 
3
4
 
5
6
 
7
8
 
 
 ​
 some text  

我的JS：

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

Answer 1

分别使用mouseenter和mouseleave事件 – 这实际上是一个“hover”事件：

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

演示

Answer 3

尝试：

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

Answer 4

应该

是

 ​
 

Answer 5

不要在里面使用’＃’符号

即

而不是

使用, insteaf :

即

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

所以内容会是这样的：

 
 
 
1
2
 
3
4
 
5
6
 
7
8
 
 
 
 some text  

而你的剧本将是，

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

结帐演示