![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
テーブルのセルに、リンクのあるテキストをはって、
a:hoverで背景が変わるようにしたのですが、
hoverの状態でセルの外側だけ背景が変わらずに、hover状態でないときの背景がほんの少しちらついてしまいます。
table .a{border: 0px;background-color:red;;padding: 2px;width: 150px;}
table .a a:hover{border:0px;padding: 2px;width: 150px;background-color:orange;}
のようにすると、
hover状態で、セルの枠が、ほんの少しredのままになってしまいます。
http://www.smashingmagazine.com/2008/08/13/top-1 …
の 3.BOX の例のように、hover状態できれいに背景の色が変わるようにしたいんですが、どう直せばいいでしょうか。よろしくおねがいいたします。
No.1ベストアンサー
- 回答日時:
とりあえずこんな感じでどうでしょう
<style>
table .a{border: 0px;background-color:red;;padding: 0px;width: 150px;}
table .a a{display:block;border:0px;padding: 2px;width: 150px;}
table .a a:hover{background-color:orange;}
</style>
<table>
<tr>
<td class="a"><a href="#">test</a></td>
</tr>
</table>
この回答への補足
なんどもすいません。
重ねて質問したいのですが、Operaで見た場合に、テキスト部分だけhover状態で背景が変わり、セル中のテキストが無い部分は
IE7で見るとセル全体がリンクになるんですが、Operaの場合リンク部分はセル全体でなくて、テキスト部分のみになってしまうんですが、これはどうすれば改善できるのでしょうか。
お時間がありましたらこちらもお答えいただけると大変たすかります。
迅速なご回答ありがとうございます。大変たすかります。きれいに枠が消えました。
.aのpadding を0にして、
.a a{diplay:block;padding:2px;}にするということでしょうか。
.aのときのpaddingが0になると、セルの中のテキストが詰まってしまうんですが、これも同時に改善するにはどうすればよいのでしょうか。
.aのpaddingを2pxにすると、hover状態の枠が復活してしまいます。
アホですいません。
No.2
- 回答日時:
.aのクラスはアンカーにつけてもよいですか?
そうであればこんな感じで・・・
<style>
table .a{border: 0px;background-color:red;;padding: 0px;width: 150px;}
table a.a{display:block;border:0px;padding: 4px;width: 150px;}
table a.a:hover{background-color:orange;}
</style>
<table>
<tr>
<td><a href="#" class="a">test</a></td>
</tr>
</table>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- Excel(エクセル) こんなことできますか?例えば、sheetに貼り付けた図形のタイトルを、セルA1の文字で表示する。 5 2022/04/22 15:25
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- その他(Microsoft Office) エクセル 表の移動 2 2023/04/05 20:29
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) 昨日、質問した件『VBA にて、条件付き書式で背景色を設定しているセルの範囲で、背景色付きのセルをカ 4 2022/04/07 14:39
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
FFにおけるDIVタグ間の隙間につ...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
CSSでborderの指定を解除する記...
-
CSS3で角丸写真にシャドーを付...
-
テーブルのセル間に余白が空い...
-
CSSで背景画像を一番下にもって...
-
CSSと<dl><dd>で間隔をあけて1...
-
【HTML】【CSS】【Swiper】 元...
-
定義リストに下線をつけたいと...
-
table周辺の隙間をなくしたい。
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
ライトボックスでスクロールバー
-
CSSで画像の横に余計な余白が・...
-
HTMLで文字が重なって表示されます
-
CSSでfloatした要素の高さを100...
-
css初心者 フレックスボックス...
-
htmlのolやulなどlistにtitleや...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報