隱藏所有表時td被徘徊

我想創建一個表，當一個特定的單元格被徘徊時，我希望所有的表都是不可見的。這裏是我的簡單的代碼：隱藏所有表時td被徘徊

<!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部分包括。我希望有人能夠幫助並儘快回覆。

來源

2013-10-24 nano nano

*幫助和很快回復*肯定你有一個老闆 –

你的JavaScript代碼在哪裏？請儘快發佈 – eggward

'table.style.visibility：「collapse」;'不是一個有效的css stmt ....你需要使用javascript的那個 –

試試這個

Demo

.hover 
{ 
    visibility:collapse; 
} 

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

來源

2013-10-24 07:25:40

如果，你在評論中提到，隱藏是要在點擊，而不是懸停實現的，該解決方案如下。

將一個複選框放在表格的前面，在切換複選框的表格中放置一個標籤。當複選框被選中時，使表格不可見。

<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。
當你測試這個時，一定要記住標籤的位置，所以你可以再次點擊它使表格可見。

來源

2013-10-24 08:30:21

隱藏所有表時td被徘徊

回答

相關問題