0

私は Web 開発、HTML および CSS の初心者なので、私の質問は少し安っぽいかもしれません。

2 つの列を含むテーブルがあります。それらの 1 つだけがタイトルで、その他にはリンクが含まれています。

私がしたいのは、次のことです。ホバーすると、テーブルにリンクが表示されます。そうしないと、リンクが非表示になります。

あと、見た目にも変身技をかけたい…

ええ、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

4

2 に答える 2

0


いくつかの観察 HTML テーブル構造に正しく従ってください。つまり、テーブルは「TR」を持つことができ、「TR」は「TD」を持つことができます。間に「スパン」を挿入することはできません。問題をスローすることはありませんが..コーディングが良くないだけです

b. 変換には、javascript (できれば Jquery) を使用する必要がある場合があります。

私はあなたのhtml http://tinkerbin.com/9vkBMX8aを修正しました

これらの行を追加する必要があります

.editcell{text-align:right;display: none;}
#historypanel:hover .editcell{display: inline;}
于 2012-09-25T03:13:24.973 に答える
0

すべての 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-25T03:21:28.160 に答える