Question

当我将鼠标悬停在 HTML 表格上时更改其单元格的颜色

2012-07-30

36145

html html-table

我查看了所有发布的答案，但似乎无法使此代码正常工作。我试图让单个单元格在鼠标悬停在其上时改变颜色，但我无法访问我们正在使用的服务的 .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>

Answer 1

在 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
    }
  );
});

Answer 2

CSS： td：hover，th：hover {背景：#ff0000；颜色：#000； }

Mark Pieszak - Trilon.io

2012-07-30

Answer 3

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