当我悬停在一个html表上时，改变它的颜色

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.

我已经看了所有的答案张贴，但我似乎不能使这个代码正确地工作。当我悬停在单个单元格上时，我试图让它改变颜色，但是我不能使用我们正在使用的服务访问.css。我*删除一个HTML代码框，我可以将我的代码粘贴到我正在修改的元素中，而不是整个。css文件…只是这个元素。

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.

这是我的代码。当我在单元格上滚动时，任何帮助将背景更改为#ff0000和文本更改为#000000将非常感谢。

(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.)

(最终，我打算为每个细胞添加一个>a href，但我正在尝试一步一步地完成这个步骤。>a href将(我希望)将所选的单元格添加到购物车中。

Thanks in advance.

提前谢谢。

<!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 horizontaly*/
     }
</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>

5 个解决方案

#1

In CSS:

在CSS中:

td:hover {
  background-color: #ff0000;
  color: #000000;
}

Or you can use JavaScript/jQuery:

或者您可以使用JavaScript/jQuery:

$(document).ready(function() {
  $("td").hover(
    function() {
      $(this).css('background-color', '#ff0000');
      $(this).css('color', '#000000');
    }, 
    function() {
      $(this).css('background-color', 'none');
      $(this).css('color', 'black'); // or whatever your original color was
    }
  );
});

#2

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

使用div (class="cell_hvr")和围绕内容的链接包装单元数据。

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

#3

CSS: td:hover, th:hover { background:#ff0000; color:#000; }

CSS: td:hover, th:hover {background:#ff0000;颜色:# 000;}

#4

You can do this by giving each cell a class

您可以通过给每个单元格一个类来实现这一点

<td class="a">..</td>

and then styling it

然后样式

<style>
  td.a { background-color:#ff0000; }
  td.a:hover { background-color:#000000; }
</style>

#5

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

我正在寻找这个问题的JavaScript版本的答案。但是，我没有使用JQuery。

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

我有oCell = newRow.insertCell();oCell.style。背景=色彩(myCounts[我]);

myCounts is just an array holding an Int..

mycount只是一个持有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.

但是现在我只是想在我当前的oCell中添加一个悬停的背景颜色，然后再把它压成线，然后继续循环……。所以我发现下面的代码是“做不到”流中唯一被选中的答案。只是不确定这对我是否有帮助。

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.

编辑! ! !我刚刚发现了我的问题(我希望代码剪切仍然对您有所帮助)，我尝试在CSS中添加鼠标悬停，但它根本不受支持。

#1