2

テーブル内に次の HTML コードがあります。

<td id="decllink"><a href="#">Decline</a></td>

そしてCSSファイルで：

#decllink {white-space:nowrap;padding:2px 2px 2px 2px;float:right}
#decllink a {color:red;font-weight:bold;text-decoration:none;background-color:inherit}
#decllink a:hover {color:white;text-decoration:none;background-color:red}

テーブル セルのリンクの上にマウスを置いたときに、背景色と背景色を切り替えてテキストを強調表示したいと考えています。そのため、リンクのテキストの色はもともと白地に赤です。リンクにカーソルを合わせると、背景が赤になり、テキストの色が白になります。この HTML/CSS コードで問題なく動作します。

ただし、リンクにカーソルを合わせると、赤い背景色がテキストとまったく同じ幅と高さになります。パディングを使用して、テキストの周りに赤い「境界線」を作成して、リンクにカーソルを合わせたときにボタンのように見えるようにしました。

それを達成する方法は？

4

2 に答える 2

1

作るだけ

#decllink { margin:0px; padding: 0px; }
#decllink a { padding: 5px } // for example
于 2012-08-12T02:18:38.963 に答える
0

変化する

#decllink a:hover {color:white;text-decoration:none;background-color:red}

に

#decllink:hover {color:white;text-decoration:none;background-color:red}

または代わりに JavaScript を使用してスタイルを適用します。

于 2012-08-12T02:19:56.950 に答える