翻转表使用 CSS 显示隐藏的跨度类文本答案

【问题标题】：Rollover table shows hidden span class text with CSS翻转表使用 CSS 显示隐藏的跨度类文本
【发布时间】：2013-09-20 19:07:23
【问题描述】：

我有一个<tr> 类，当用鼠标滚动整行时，我希望出现一些包含在其中一个单元格中的文本。如果可能的话，这可以用 CSS 来完成吗？如何让整个表格行翻转显示先前隐藏在其中一个单元格中的文本，这也应该适用于其中包含单元格的任何其他行在单元格中使用自己的隐藏文本。我知道它可能需要 jQuery 来完成这个，但如果可能的话，这将是首选。

这是一个例子，论坛名称上的滚动显示子论坛：http://www.kanyetothe.com/forum/

【问题讨论】：

标签： jquery html css html-table hover

【解决方案1】：

用css很容易实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<style>
    .hidden {
        display: none;
    }

    tr:hover .hidden {
        display: block;
    }
</style>

<table>
    <tr>
        <td>Row 1 Column 1</td>
        <td class="hidden">Row 1 Column 2</td>
        <td>Row 1 Column 3</td>
    </tr>
    <tr>
        <td>Row 2 Column 1</td>
        <td class="hidden">Row 2 Column 2</td>
        <td>Row 2 Column 3</td>
    </tr>

</table>

</body>
</html>

【讨论】：