Html 隐藏/显示表格单元格<;TD>;将鼠标悬停在<;TR>;
我是web开发、HTML和CSS的初学者,所以我的问题可能会有点俗气 我有一个包含两列的表。其中只有一个是标题,其他包含链接 我想做的是:当鼠标悬停时,链接所在的表将出现;否则,链接将被隐藏 另外,我想对它们的外观进行变换 是的,我在谷歌上搜索了很多教程,但我无法在我的桌子上应用这些教程 我觉得我的桌子样式有一些问题?也许它与其他元素造型不同 以下是我到目前为止所做的 HTML代码:Html 隐藏/显示表格单元格<;TD>;将鼠标悬停在<;TR>;,html,css,hover,show-hide,Html,Css,Hover,Show Hide,我是web开发、HTML和CSS的初学者,所以我的问题可能会有点俗气 我有一个包含两列的表。其中只有一个是标题,其他包含链接 我想做的是:当鼠标悬停时,链接所在的表将出现;否则,链接将被隐藏 另外,我想对它们的外观进行变换 是的,我在谷歌上搜索了很多教程,但我无法在我的桌子上应用这些教程 我觉得我的桌子样式有一些问题?也许它与其他元素造型不同 以下是我到目前为止所做的 HTML代码: <div id='historypanel'> <span class="trueta
<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 </a>
<a href="drop.php" class="remove">drop </a>
<a href="hide.php" class="hide">hide permanently </a>
<a href="olden.php" class="old">old </a>
<a href="analytics.php" class="view">view analytics</a>
</TD>
</TR>
</TABLE>
</span>
</div>
#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;}
你也可以在这里看到:很少观察到A.请正确遵循HTML表格结构。ie表可以有“TR”,“TR”有“TD”。不能在两者之间插入“span”。虽然它不会引发任何问题。。只是编码不好 b。对于转换,您可能必须使用javascript(最好是Jquery) 我已经修改了你的html 您需要添加这些行
.editcell{text-align:right;display: none;}
#historypanel:hover .editcell{display: inline;}
所有答案:
.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;}`
请给出两个符合以下条件的可视示例:至少三行,在将鼠标悬停在一行上之前希望它是什么样子,以及在将鼠标悬停在一行上之后希望它是什么样子?现在它只有一行两列。。在悬停之前,我想隐藏第二列内容(链接)。。悬停后,我希望显示内容。。就这样