0

特定のセルがホバーされたときにすべてのテーブルを非表示にするテーブルを作成しようとしています。これが私の簡単なコードです：

<!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それは機能していません。実際には、パーツに何を含める必要があるかわかりません。誰かが助けてすぐに返信できることを願っています。

4

2 に答える 2

0

これを試して

デモ

.hover
{
  visibility:collapse;
}

$('table tr td').hover(function(){
   $(this).toggleClass('hover');
});
于 2013-10-24T07:25:40.377 に答える
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 は必要ありません。新しいフィドルを参照してください。
これをテストするときは、ラベルがどこにあったかを覚えておいてください。そうすれば、もう一度クリックしてテーブルを表示できるようになります。

于 2013-10-24T08:30:21.960 に答える