Как изменить цвет ячейки при наведении курсора

Basically when I hover over a row in my table i want the background color of the row to change to say ‘black’ and the specific cell or td I am hovering over to change to ‘red’.

Ie so two events occur when hovering. I know how to do it for one or the other but not both.

Is this possible using jquery?

Thx to everyone for their contribution, I’ve repped you all.

asked Jul 29, 2013 at 16:04

$('td').hover( function() {
    $(this).parent().children().css("background-color", "black");
    $(this).css("background-color", "red")
});

$('tr').mouseleave( function() {
    $(this).children('td').css("background-color", "white");// or whatever
});

answered Jul 29, 2013 at 16:12

Add some class to that td that you want to be red (lets call that class ‘rdClass’) and the row ‘blkClass’:

<table>
<tr class='rdClass'>
 <td>
        1
 </td>
 <td class='blkClass'>
        2
 </td>
 <td>
        3
 </td>
</tr>
</table>

$(document).ready(function () 
{
    $(".rdClass").mouseover(function ()
    {
        $(this).css("background-color", "red");
    });

    $(".blkClass").mouseover(function ()
    {
        $(this).css("background-color", "black");
    });
});

answered Jul 29, 2013 at 16:08

Add a hover listener to all rows and td’s that adds and removes a class, then use CSS to style that class differently for a row and cell.

Working Demo

jQuery

$('tr, td').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

CSS

tr.highlight {
    background-color: red;
}

td.highlight {
    background-color: black;
}

answered Jul 29, 2013 at 16:10

answered Jul 29, 2013 at 16:08

$("td").hover(function(){
  $(this).css("background-color", "red");
  $(this).parrent('tr').css("background-color", "black");
});

answered Jul 29, 2013 at 16:11

Basically when I hover over a row in my table i want the background color of the row to change to say ‘black’ and the specific cell or td I am hovering over to change to ‘red’.

Ie so two events occur when hovering. I know how to do it for one or the other but not both.

Is this possible using jquery?

Thx to everyone for their contribution, I’ve repped you all.

asked Jul 29, 2013 at 16:04

$('td').hover( function() {
    $(this).parent().children().css("background-color", "black");
    $(this).css("background-color", "red")
});

$('tr').mouseleave( function() {
    $(this).children('td').css("background-color", "white");// or whatever
});

answered Jul 29, 2013 at 16:12

Add some class to that td that you want to be red (lets call that class ‘rdClass’) and the row ‘blkClass’:

<table>
<tr class='rdClass'>
 <td>
        1
 </td>
 <td class='blkClass'>
        2
 </td>
 <td>
        3
 </td>
</tr>
</table>

$(document).ready(function () 
{
    $(".rdClass").mouseover(function ()
    {
        $(this).css("background-color", "red");
    });

    $(".blkClass").mouseover(function ()
    {
        $(this).css("background-color", "black");
    });
});

answered Jul 29, 2013 at 16:08

Add a hover listener to all rows and td’s that adds and removes a class, then use CSS to style that class differently for a row and cell.

Working Demo

jQuery

$('tr, td').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

CSS

tr.highlight {
    background-color: red;
}

td.highlight {
    background-color: black;
}

answered Jul 29, 2013 at 16:10

answered Jul 29, 2013 at 16:08

$("td").hover(function(){
  $(this).css("background-color", "red");
  $(this).parrent('tr').css("background-color", "black");
});

answered Jul 29, 2013 at 16:11

I have looked through all the answers posted but I cant seem to get this code to work correctly. I am trying to get the individual cell to change color when I hover over it, but I don’t have access to the .css with the service we are using. I am being forced to drop an HTML code box that I can paste my code into specific to the element I am changing, but not the entire .css file…just that element.

Here is my code. Any help in getting the background to change to #ff0000 and the Text to change to #000000 when I roll over the cell would be greatly appreciated.

(It is ultimately my intent to add a >a href for each of the cells as well, but I am trying to do this one step at a time. The >a href will (I hope) add the selected cell to a shopping cart.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<title></title>

<style type="text/css">
body {
      background: #000;   
}
#wrap {
     margin: 0 auto; /* margin 0 auto will center that box in your document */
     width: 780px; /*size of your box*/
     background: #000;
     text-align: center; /* everything will be written in that box will be centered horizontally*/
     }
</style>
<div id="wrap">
  <table width="780">
     <tr>
        <td align="center">
<table border=1>
  <tbody>
    <!-- Results table headers -->
    <tr>
      <th>Messages Per Month</th>
      <th>1 Month Pricing</th>
      <th>3 Month Pricing</th>
      <th>12 Month Pricing</th>
    </tr>
    <tr>
      <td>500</td>
      <td>$14.95/Month</td>
      <td>$12.95/Month</td>
      <td>$9.95/Month</td>
    </tr>
    <tr>
      <td>1,000</td>
      <td>$24.95/Month</td>
      <td>$20.95/Month</td>
      <td>$17.95/Month</td>
    </tr>
    <tr>
      <td>1,500</td>
      <td>$37.95/Month</td>
      <td>$31.95/Month</td>
      <td>$26.95/Month</td>
    </tr>
    <tr>
      <td>2,000</td>
      <td>$49.95/Month</td>
      <td>$41.95/Month</td>
      <td>$35.95/Month</td>
    </tr>
    <tr>
      <td>2,500</td>
      <td>$62.95/Month</td>
      <td>$52.95/Month</td>
      <td>$44.95/Month</td>
    </tr>
    <tr>
      <td>5,000</td>
      <td>$119.95/Month</td>
      <td>Not Available</td>
      <td>Not Available</td>
    </tr>
    <tr>
      <td>7,500</td>
      <td>$179.95/Month</td>
      <td>Not Available</td>
      <td>Not Available</td>
    </tr>
    <tr>
      <td>10,000</td>
      <td>$219.95/Month</td>
      <td>Not Available</td>
      <td>Not Available</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
        </td>
     </tr>
   </table>
</div>

Wrap the cell data with a div (class=»cell_hvr») and a link around the content.

.cell_hvr {
    padding: 2px;
    width: 100%;
    height: 100%;
}
.cell_hvr a {
    display: block;
    text-decoration: none;
}
.cell_hvr a:hover {
    background-color: red;
}

<div class="cell_hvr"><a href="#" target="_blank"> (Your content) </a></div>

answered Aug 10, 2015 at 11:57

answered Jul 30, 2012 at 23:50

I was looking for the JavaScript version of the answer to this question. But, I am not using JQuery..

I have
oCell = newRow.insertCell();
oCell.style.background = tintTest(myCounts[i]);

myCounts is just an array holding an Int..

but now i just wanted to add the hover background color to my current oCell before smashing it in line and moving on with the loop……
So I found the code below as the only checked answer in a stream of ‘can’t be done’.. just not sure if this would even help me.

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

EDIT!!! I just found out my issue (I hope the code snip helps with yours still) I tried to add the hover in CSS and it just isn’t supported at all.

answered Oct 26, 2017 at 21:37

I have looked through all the answers posted but I cant seem to get this code to work correctly. I am trying to get the individual cell to change color when I hover over it, but I don’t have access to the .css with the service we are using. I am being forced to drop an HTML code box that I can paste my code into specific to the element I am changing, but not the entire .css file…just that element.

Here is my code. Any help in getting the background to change to #ff0000 and the Text to change to #000000 when I roll over the cell would be greatly appreciated.

(It is ultimately my intent to add a >a href for each of the cells as well, but I am trying to do this one step at a time. The >a href will (I hope) add the selected cell to a shopping cart.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<title></title>

<style type="text/css">
body {
      background: #000;   
}
#wrap {
     margin: 0 auto; /* margin 0 auto will center that box in your document */
     width: 780px; /*size of your box*/
     background: #000;
     text-align: center; /* everything will be written in that box will be centered horizontally*/
     }
</style>
<div id="wrap">
  <table width="780">
     <tr>
        <td align="center">
<table border=1>
  <tbody>
    <!-- Results table headers -->
    <tr>
      <th>Messages Per Month</th>
      <th>1 Month Pricing</th>
      <th>3 Month Pricing</th>
      <th>12 Month Pricing</th>
    </tr>
    <tr>
      <td>500</td>
      <td>$14.95/Month</td>
      <td>$12.95/Month</td>
      <td>$9.95/Month</td>
    </tr>
    <tr>
      <td>1,000</td>
      <td>$24.95/Month</td>
      <td>$20.95/Month</td>
      <td>$17.95/Month</td>
    </tr>
    <tr>
      <td>1,500</td>
      <td>$37.95/Month</td>
      <td>$31.95/Month</td>
      <td>$26.95/Month</td>
    </tr>
    <tr>
      <td>2,000</td>
      <td>$49.95/Month</td>
      <td>$41.95/Month</td>
      <td>$35.95/Month</td>
    </tr>
    <tr>
      <td>2,500</td>
      <td>$62.95/Month</td>
      <td>$52.95/Month</td>
      <td>$44.95/Month</td>
    </tr>
    <tr>
      <td>5,000</td>
      <td>$119.95/Month</td>
      <td>Not Available</td>
      <td>Not Available</td>
    </tr>
    <tr>
      <td>7,500</td>
      <td>$179.95/Month</td>
      <td>Not Available</td>
      <td>Not Available</td>
    </tr>
    <tr>
      <td>10,000</td>
      <td>$219.95/Month</td>
      <td>Not Available</td>
      <td>Not Available</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
        </td>
     </tr>
   </table>
</div>

Wrap the cell data with a div (class=»cell_hvr») and a link around the content.

.cell_hvr {
    padding: 2px;
    width: 100%;
    height: 100%;
}
.cell_hvr a {
    display: block;
    text-decoration: none;
}
.cell_hvr a:hover {
    background-color: red;
}

<div class="cell_hvr"><a href="#" target="_blank"> (Your content) </a></div>

answered Aug 10, 2015 at 11:57

answered Jul 30, 2012 at 23:50

I was looking for the JavaScript version of the answer to this question. But, I am not using JQuery..

I have
oCell = newRow.insertCell();
oCell.style.background = tintTest(myCounts[i]);

myCounts is just an array holding an Int..

but now i just wanted to add the hover background color to my current oCell before smashing it in line and moving on with the loop……
So I found the code below as the only checked answer in a stream of ‘can’t be done’.. just not sure if this would even help me.

var css = 'table td:hover{ background-color: #00ff00 }';
var style = document.createElement('style');

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);

EDIT!!! I just found out my issue (I hope the code snip helps with yours still) I tried to add the hover in CSS and it just isn’t supported at all.

answered Oct 26, 2017 at 21:37