我正在尝试创建一个表,当特定单元格悬停时,我希望所有表都不可见。 这是我的简单代码:
<!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
部分包含什么。
我希望有人能尽快帮助并回复。
答案 0 :(得分:0)
试试这个
<强> Demo 强>
.hover
{
visibility:collapse;
}
$('table tr td').hover(function(){
$(this).toggleClass('hover');
});
答案 1 :(得分:0)
如果你在评论中提到隐藏是通过点击而不是悬停来实现的,解决方案如下:
在表格前面放一个复选框,在表格中放置一个标签,切换复选框。选中复选框后,使表格不可见。
<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。
测试时,请务必记住标签的位置,以便再次单击以使表格可见。