締切済み

:hoverで枠内どこに合わせても文字色が変わる

  • 困ってます
  • 質問No.9590245
  • 閲覧数32
  • ありがとう数0
  • 気になる数0
  • 回答数2
  • コメント数0

お礼率 17% (6/34)

画像のようなメニューを作りたいと思っています。

下記のように記述すると
<li>に:hoverをつけ、カーソルを合わせると<li>内の枠線下の部分と<li>内の背景色は変わりますが文字に関しては文字の上にカーソルを合わせないと文字色は変わりません。
<li>Yahoo!</li>、枠線内であれば文字が入っていない部分にカーソルを合わせても、枠線下の部分、背景色、文字色全て変える為にはどのように記述すればよいですか?


少し意味がわかりづらいかと思いますが、お分かりの方いらっしゃいましたら教えて下さい。
宜しくお願いいたします。





【HTML】
<nav>
<ul>
<li><a href="#">Yahoo!</a></li>
<li>……</li>
<li>……</li>
</ul>

【CSS】
nav ul li:hover{
background-color: yellow;
border-bottom: 5px;
}
nav ul li a:hover{
color:blue;
}

回答 (全2件)

  • 回答No.2

ベストアンサー率 66% (96/144)

こんにちは。

発想を変えて、Aタグの幅と高さを親要素(この場合LI)に合わせて、Aタグに背景色を設定。hoverでAタグの背景色を変える方法があります。

### 一例
li a {
display:block;
width:100%;
height:100%;
background-color:#ff0;
color:#00f;
}
li a:hover {
background-color:#ccc;
color:#f00;
}

※Aタグをblock要素にして幅と高さを100%にすることで、親要素とサイズが一致します。
  • 回答No.1

ベストアンサー率 38% (2966/7677)

コンピューター カテゴリマスター
【CSS】
nav ul li:hover{
background-color: yellow;
border-bottom: 5px;
color:blue;
}
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集

ピックアップ

ページ先頭へ