boderで囲んだaタグ全体をhoverしたい

Question

<a href="...." > 例文<a>
でこのaタグをboderで囲んでカーソルを、合わせた時に文字だけではなくて、boderの余白も含め全体にhoverを効かせて色付けたいのですがどうすれば良いですか？

今のところ以下のように書いてます。
. ooo a: hover ｛
color: red:
｝

Answer 1

borderの内側(パディング)に背景色を付けるだけなら、

.ooo a {
  border: (お好きな設定で);
  padding: (お好きな隙間を);
}

.ooo a:hover ｛
  color: red;
  background-color: (お好きな背景色を);
}

とすればいい。

borderの外側(マージン)にも背景色を付けたいなら、(a要素ではなく)a要素の親要素のスタイルを変更する必要がある。

Comments

[naoya0922]

貴重な意見ありがとうございます。