将鼠标悬停在 html 表格中时更改单元格的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11731269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing the color of a cell in a html table when I hover over it
提问by user1564352
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 将（我希望）将所选单元格添加到购物车.)
<!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>.95/Month</td>
<td>.95/Month</td>
<td>.95/Month</td>
</tr>
<tr>
<td>1,000</td>
<td>.95/Month</td>
<td>.95/Month</td>
<td>.95/Month</td>
</tr>
<tr>
<td>1,500</td>
<td>.95/Month</td>
<td>.95/Month</td>
<td>.95/Month</td>
</tr>
<tr>
<td>2,000</td>
<td>.95/Month</td>
<td>.95/Month</td>
<td>.95/Month</td>
</tr>
<tr>
<td>2,500</td>
<td>.95/Month</td>
<td>.95/Month</td>
<td>.95/Month</td>
</tr>
<tr>
<td>5,000</td>
<td>9.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>7,500</td>
<td>9.95/Month</td>
<td>Not Available</td>
<td>Not Available</td>
</tr>
<tr>
<td>10,000</td>
<td>9.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>
回答by Jon
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
}
);
});
回答by reese_thebeast
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>
回答by RAuTeSH
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>
回答by Dill Pickle
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.background = tintTest(myCounts[i]);
myCounts is just an array holding an Int..
myCounts 只是一个包含 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 中，然后再将其粉碎并继续循环......所以我发现下面的代码是“can”流中唯一经过检查的答案没有完成'..只是不确定这是否对我有帮助。
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 中添加悬停，但它根本不受支持。
回答by Mark Pieszak - Trilon.io
CSS: td:hover, th:hover { background:#ff0000; color:#000; }
CSS： td:hover, th:hover { background:#ff0000; color:#000; }
