我是Web开发,HTML和CSS的初学者,所以也许我的问题会有点俗气。
我有一个包含两列的表格。其中只有一个是标题,其他包含链接。
我想要做的是执行以下操作:悬停时,将显示链接的表格;否则,链接将被隐藏。
另外,我想对它们的外观应用转换移动...
是的,我在谷歌上搜索了很多教程,但我无法在我的桌子上应用其中任何一个。
我认为我的表格样式存在一些问题?也许是另一种元素样式的不同形式?
这是我到目前为止所做的。
网页代码:
<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>
.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
所有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;}`
很少有观察结果
一个。请正确遵循 HTML 表格结构。即表可以有"TR","TR"有"TD"。 不能在两者之间插入"span"。虽然它不会抛出任何问题..它只是不好编码
二.对于转换,你可能必须使用javascript(最好是Jquery)。
我已经修改了您的 html http://tinkerbin.com/9vkBMX8a
您需要添加这些行
.editcell{text-align:right;display: none;}
#historypanel:hover .editcell{display: inline;}