隱藏/顯示錶格單元<TD>當徘徊時的內容<TR>

我是網頁開發，HTML和CSS的初學者，所以也許我的問題會有點俗氣。隱藏/顯示錶格單元<TD>當徘徊時的內容<TR>

我有一個包含兩列的表。其中只有一個是標題，其他則包含鏈接。

我想要的是做到以下幾點：當盤旋時，表格中的鏈接將出現;否則，鏈接將被隱藏。

另外，我想變換招適用於自己的外表...

呀，我搜索在谷歌，我發現很多教程，但我不能在我的表應用任何這些。

我認爲我的桌子造型有一些問題？也許它與另一種元素造型不同？

這是我到目前爲止所做的。

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

來源

2012-09-25 Saleem Ali

能否請您給兩個視覺例子如下標準：在至少三行，你希望它在懸停在一行之前看起來像什麼，以及在懸停在一行之後你想要它看起來像什麼？ – tuespetre

現在它只是一個行和兩列..在盤旋之前我想要隱藏第二列內容（鏈接）..在盤旋後我想要顯示的內容..就像那個 –

一些意見
一個。請遵循HTML表格結構。即表格可以有「TR」，「TR」有「TD」。您不能在兩者之間插入「span」。雖然它不會拋出任何問題..它只是不好的編碼

b。對於轉換，你可能不得不使用JavaScript（最好是Jquery）。

我已經修改了你的HTML http://tinkerbin.com/9vkBMX8a

您需要添加這些行

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

來源

2012-09-25 03:13:24 bhatanant2

謝謝，真的幫助.. –

所有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;}`

來源

2012-09-25 03:21:28

隱藏/顯示錶格單元<TD>當徘徊時的內容<TR>

回答

相關問題