Question

我有一个HTML表格，我希望隐藏一个单元格（<td>）的内容，除非鼠标悬停在父行（<tr>）上的任何地方。

在悬停时显示一个元素非常简单，但我不确定如何显示另一个元素而不是悬停的元素。

这可以单独用CSS完成，还是需要某种JavaScript？（我有jQuery和jQuery UI可用。）

Answer 1

tr:hover > td {
    display:inline;
}

这假设您隐藏的任何内容都隐藏在display:none;中。只需使用适合您情况的任何属性。

编辑：我将其更改为display:inline，因为在表格的情况下，您可能希望单元格保持彼此相邻而不是上下。

Example

Answer 2

我要做的是在td内部设置一个div，将其不透明度设置为0并添加这样的转换

.command-panel {
   opacity: 0;
   -moz-transition: opacity 0.3s ease 0s;
   -webkit-transition: opacity 0.3s ease 0s;
   -ms-transition: opacity 0.3s ease 0s;
   -o-transition: opacity 0.3s ease 0s;
   transition: opacity 0.3s ease 0s;
}

tr:hover .command-panel {
   opacity: 1;
}

这样你就会有一个很好但足够短的动画

Answer 3

请试试这个：

    <head></head>
    <body>
        <table style="border: 1px solid #ccc">
            <tr  onmouseover="document.getElementById('mytd').style.display='block'"
                 onmouseout="document.getElementById('mytd').style.display='none'"
                 >
                <td>
                    fgfgdgd1

                </td>
                 <td style="display:none" id="mytd">
                    fgfgdgd1

                </td>

            </tr>

        </table>

    </body>
</html>

将鼠标悬停在父级上时显示项目

3 个答案: