悬停 <TR> 时隐藏/显示表格单元格 <TD> 内容答案

【问题标题】：hide/show table cell <TD> contents when hovering the <TR>悬停 <TR> 时隐藏/显示表格单元格 <TD> 内容
【发布时间】：2012-09-25 02:53:22
【问题描述】：

我是 Web 开发、HTML 和 CSS 方面的初学者，所以我的问题可能有点俗气。

我有一个包含两列的表格。其中只有一个是标题，其他包含链接。

我想要做的是：当悬停时，表格链接会出现；否则，链接将被隐藏。

另外，我想对它们的外观应用一个变换动作......

是的，我在 Google 上搜索了很多教程，但我无法在我的桌子上应用这些教程。

我认为我的表格样式存在一些问题？也许它与其他元素样式不同？

这是我到目前为止所做的。

HTML 代码：

<div id='historypanel'>
    <span class="truetables">
        <TABLE border=0><TR valign="top" class="panelfather">
            <TR>
                <TD width="130" class="linkcell">
                    <a href="link/" class="panellink">this is link</a>
                </TD><span id="options">
                <TD width="480" class="editcell">
                    <a href="edit.php" class="edit">edit &nbsp;</a>
                    <a href="drop.php" class="remove">drop &nbsp;</a>
                    <a href="hide.php" class="hide">hide permanently &nbsp;</a>
                    <a href="olden.php" class="old">old &nbsp;</a>
                    <a href="analytics.php" class="view">view analytics</a>
                </TD>
            </TR>
        </TABLE>
    </span>
</div>

CSS：

#historypanel>.truetables>table {
    margin-bottom: 5;
    -webkit-box-shadow: 0px 3px 3px 2px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 3px 2px rgba(0,0,0,0.2);
}

#historypanel>.truetables>table:hover {
    background: #18323c;
    -webkit-box-shadow: 2px 3px 1px rgba(0,0,0,0.1);
    box-shadow: 2px 3px 1px rgba(0,0,0,0.1);
}

#historypanel a:link,a:visited,a:active {
    color: #112229;text-decoration: normal;
}

.panellink:hover {color: #5f9998 !important;}

.edit:hover {color: #528da4 !important;}

.remove:hover {color: #fc4c6d !important;}

.hide:hover {color: #75b096 !important;}

.old:hover {color: #ab856e !important;}

.view:hover {color: #dadb82 !important;}

a:link {text-decoration: none !important;}

.panellink {font-size: 20;}

.edit,.remove,.hide,.old,.view {font-size: 14px;}

.editcell,.removecell,.hidecell,.oldcell,.viewcell{
    padding-top:10
}

.editcell{text-align:right;}

您也可以在这里查看：http://tinkerbin.com/xdHoEXgW

【问题讨论】：

能否请您给出两个符合以下标准的视觉示例：至少三行，您希望它在悬停在一行之前的样子，以及您希望它在悬停在一行上之后的样子行？
现在只有一行两列..在悬停之前我希望隐藏第二列内容（链接）..在悬停后我希望显示内容..就像那样

标签： html css hover show-hide

【解决方案1】：

所有 CSS 答案：

.hidden_rows {
     display:inline-block;
     background: #18323c;
    -webkit-box-shadow: 2px 3px 1px rgba(0,0,0,0.1);
     box-shadow: 2px 3px 1px rgba(0,0,0,0.1);
     transition:all 1s ease-out;
     -o-transition:all 1s ease-out;
     -moz-transition:all 1s ease-out;
     -webkit-transition:all 1s ease-out;}

.hover_me:hover .hidden_rows {
      display:block;}`

【讨论】：

【解决方案2】：

很少观察
一个。请务必正确遵循 HTML 表格结构。即表可以有“TR”，“TR”有“TD”。您不能在两者之间插入“跨度”。虽然它不会引发任何问题.. 它只是不好编码

b.对于转换，您可能必须使用 javascript（最好是 Jquery）。

我修改了你的htmlhttp://tinkerbin.com/9vkBMX8a

你需要添加这些行

.editcell{text-align:right;display: none;}
#historypanel:hover .editcell{display: inline;}

【讨论】：