滚动表使用CSS显示隐藏的span类文本

时间:2013-09-16 15:04:54

标签: jquery html css html-table hover

我有一个<tr>类,在使用鼠标翻转整行时,我想要显示一个单元格中包含的一些文本。如果可能的话,可以用CSS完成,并且如何将整个表行的翻转显示先前隐藏在其中一个单元格中的文本,同样也应该适用于其中包含单元格的任何其他行在单元格中使用自己的隐藏文本。我知道可能需要jQuery才能实现这一目标,但如果可能的话,只需要纯CSS,这将是首选。

以下是一个示例,论坛名称上的翻转显示了儿童论坛:http://www.kanyetothe.com/forum/

1 个答案:

答案 0 :(得分:0)

用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>