悬停 td 时隐藏所有表格答案

【问题标题】：Hide all table when a td is hovered悬停 td 时隐藏所有表格
【发布时间】：2013-11-02 18:38:41
【问题描述】：

我正在尝试创建一个表格，当特定单元格悬停时，我希望所有表格都不可见。这是我的简单代码：

<!DOCTYPE html>
<html>
<head>
<style>
h4:hover
{
visibility:collapse;
}
table
{
visibility:visible;
}
#vis {background:#008500; color:#fff;}
td#vis:hover{
table.style.visibility:"collapse";
}
</style>
</head>
<body>
<p>
Each table starts with a table tag. 
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td id="vis">100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>

它不起作用，实际上我不知道必须在td#vis:hover 部分中包含什么。我希望有人可以帮助并尽快回复。

【问题讨论】：

帮助并尽快回复你肯定有老板
你的javascript代码在哪里？请尽快发布
table.style.visibility:"collapse"; 不是有效的 css stmt....您需要为此使用 javascript
使用 jQuery jsfiddle.net/arunpjohny/gWBz5/1
我没有 javascript 代码

标签： jquery html css html-table visibility

【解决方案1】：

试试这个

Demo

.hover
{
  visibility:collapse;
}

$('table tr td').hover(function(){
   $(this).toggleClass('hover');
});

【讨论】：

【解决方案2】：

如果如您在 cmets 中提到的，隐藏是通过单击而不是悬停来实现的，则解决方案如下。

在表格前放置一个复选框，在表格中放置一个用于切换复选框的标签。选中复选框时使表格不可见。

<input type="checkbox" id="nice_trick_eh" />
<table border="1">
<tr>
    <td id="vis"><label for="nice_trick_eh">100</label></td>

和 CSS

#nice_trick_eh {display:none}
#nice_trick_eh:checked + table {opacity:0}
#vis label {display:inline-block; width:100%}

这适用于大多数浏览器。不需要Javascript。见new fiddle。
当您对此进行测试时，请务必记住标签所在的位置，以便您可以再次单击它以使表格可见。

【讨论】：