マウスが乗った行の色を変える。

| コメント(0) | トラックバック(0)


マウスが乗った行の色を変化させると、行や項目の多い表が一段と見やすく成りますね。


表のボーダーを表示する(CSS編)で参考にさせて頂いた All About さんで「マウスが乗った行だけ装飾を変化させる」方法を紹介されていましたので、早速導入してみました。

自作PCでは「表のボーダーを表示する(CSS編)その三」から導入しています。

表を多く使用するようなホームページには、有効活用出来ると思いますのでご紹介しておきます。

パーツメーカー型式金額
合計48,980円
マザーボードMSIG965MDH-FI6,000円
CPUIntelPentium D4,200円
メモリーCFDSDRAM PC5400(DDR2-667)13,000円
キャプチャーボードI・O DATAGV-MVP/HS9,000円
HDDHITACHIDeskster HDP725050GLA3604,720円
光学ドライブLGGH22NP204,080円
ケースSCY0939series7,980円


表を作るHTML
<table class="pricelist">
<thead>
<tr><th>パーツ</th><th>メーカー</th><th>型式</th><th>金額</th></tr>
</thead>
<tfoot>
<tr><th colspan="3">合計</th><td class="price">48,980円</td></tr>
</tfoot>
<tbody>
<tr><td>マザーボード</td><td>MSI</td><td>G965MDH-FI</td><td class="price">6,000円</td></tr>
<tr><td>CPU</td><td>Intel</td><td>Pentium D</td><td class="price">4,200円</td></tr>
<tr><td>メモリー</td><td>CFD</td><td>SDRAM PC5400(DDR2-667)</td><td class="price">13,000円</td></tr>
<tr><td>キャプチャーボード</td><td>I・O DATA</td><td>GV-MVP/HS</td><td class="price">9,000円</td></tr>
<tr><td>HDD</td><td>HITACHI</td><td>Deskster HDP725050GLA360</td><td class="price">4,720円</td></tr>
<tr><td>光学ドライブ</td><td>LG</td><td>GH22NP20</td><td class="price">4,080円</td></tr>
<tr><td>ケース</td><td>SCY</td><td>0939series</td><td class="price">7,980円</td></tr>
</tbody>
</table>


All About さんの「マウスが乗った行だけ装飾を変化させる」で紹介されているソースを、class 属性のみ変更して転載させて頂いています。


スタイルシート

<style type="text/css">
   /* 行にマウスが乗ったときの装飾 */
   table.pricelist tr:hover { background-color: #ffcccc; color: #808080; }
</style>


ご存じの通り hover 疑似クラスは、リンクの文字色や背景、アンダーラインなどの装飾に用いられていますが、自作PCではリンク文字を動かす事にも使用しています。


このスタイルシートは class 属性が <table class="pricelist">と成っているため、<table>〜</table>のタグ内では動作しないので注意して下さい。

また MovableType では、このソースをそのまま記述しても動作しない事があるかと思います。ご使用のテンプレートに合わせて記述する必要がありますので注意して下さい。


どうしても動作しない場合は、動作させたい投稿記事をテキストエディター等で開き、<table class="pricelist">〜</table>が含まれているタグ又は要素を調べても良いかと思います。

自作PCでは<div id="more" class="asset-more">〜<table class="pricelist">〜</table>〜</div>と成っているので

div.asset-more table.pricelist tr:hover {
    background-color: #FFD2FF; color: #AA00AA;
}

と記述しています。


div table.pricelist tr:hover {
    background-color: #FFD2FF; color: #AA00AA;
}

と記述しても問題なく動作はする様です。(参考までに…)





参考になった方はクリック

↓ ↓ ↓ ↓ ↓ ↓

にほんブログ村 IT技術ブログ 自宅サーバー構築へ


トラックバック(0)

トラックバックURL: http://jisakupc.ddo.jp/cgi-bin/mt/mt-tb.cgi/3931

コメントする

最近のコメント

アーカイブ

今日
昨日

Links

ブログパーツ(無料)

インフォブログランキング
知識の杜