Jquery - leaving a freeze state

Question

I have 2 div tags. The first contains a table. The second contains text. When the page loads, both divs have no background color. When you hover over the td of the first div, the second background color of the div 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 remains yellow. I would like the color to be removed when exiting the freeze state. Hope someone can help. Thank you in advance for your answers. Greetings. Mark.

My 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> 

My JS:

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

Answer 1

Use the mouseenter and mouseleave separately - this is actually the "hover" event:

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

Demo

Answer 2

Error in use : when defining a single property. When defining a single property, you should use ,

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

Decision

Use this

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

Or, if you want to continue to use the .on() method

 $(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

Try:

 $("#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

must

 <div id="#div-one"> 

will be

 ​<div id="div-one"> 

Answer 5

Do not use the "#" character inside

i.e. <div id="#div-one"> instead of <div id="div-one">

Use insteaf :

i.e.

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

So, the content will be like this:

 <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> 

and your script will be,

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

Checkout demo