当我悬停在HTML表格的单元格上时，如何更改单元格的颜色？

Question

当我悬停在HTML表格的单元格上时，如何更改单元格的颜色？

5

我已经查看了所有发布的答案，但似乎无法正确运行此代码。我正在尝试在鼠标悬停时更改单元格的颜色，但我们使用的服务没有访问.css文件的权限。我被迫放置一个HTML代码框，可以将我的代码粘贴到要更改的特定元素中，但不是整个.css文件...只有该元素。

以下是我的代码。如果能帮助我在鼠标滚动单元格时将背景更改为＃ff0000并将文本更改为＃000000，将不胜感激。

（最终我的意图是为每个单元格添加一个>a href，但我正在一步一步地完成这个过程。>a href将（我希望）将所选单元格添加到购物车中。）

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

- user1564352

“我被迫放弃一个HTML代码框，以便我可以将我的代码粘贴到我正在更改的特定元素中”，你是什么意思？你的意思是只能为HTML元素创建style属性吗？请给我们展示一个例子，说明你可以做些什么，以产生HTML和CSS代码。 - Jukka K. Korpela

5个回答

1

你可以通过给每个单元格添加一个类来实现这个功能。

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

然后对其进行样式设计。

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

- RAuTeSH

RA的示例中的“a”是用来定义或暗示HTML“a”标签（例如超链接），还是只是一个随机的类名？ - FloverOwe

1

将单元格数据用 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>

- reese_thebeast

0

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

我有 oCell = newRow.insertCell(); oCell.style.background = tintTest(myCounts[i]);

myCounts只是一个包含Int的数组..

但现在我只想在将其压缩并继续循环之前，为我的当前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);

编辑!!! 我刚刚发现了我的问题（希望代码片段仍然有助于您的问题）。我尝试在CSS中添加悬停效果，但根本不支持。

- Dill Pickle

0

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

- Mark Pieszak - Trilon.io

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jon · Accepted Answer

在CSS中：

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

或者你可以使用 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
    }
  );
});