CODEWITHSUNDEEP
jquery
Marc
Marc

Reputation: 9527

jquery - leaving the hover state

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.

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

Upvotes: 6

Views: 16055

Answers (5)

Didier Ghys
Didier Ghys

Reputation: 30666

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

Upvotes: 17

Rishi Php
Rishi Php

Reputation: 1418

Dont use '#' symbol inside

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

Use , insteaf of :

i.e. 

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

So content would 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 would be,

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

Checkout Demo

Upvotes: 0

Starx
Starx

Reputation: 78971

There is an error, you are using : when defining 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,
});

Solution

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 keep on using .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

Upvotes: 4

Timbadu
Timbadu

Reputation: 1551

Should

<div id="#div-one">

be

​<div id="div-one">

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

Try:


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

Upvotes: 0

Related Questions