こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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

下記のように記述すると
<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;
}

投稿日時 - 2019-02-21 23:28:57

QNo.9590245

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

こんにちは。

発想を変えて、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%にすることで、親要素とサイズが一致します。

投稿日時 - 2019-02-23 10:34:47

ANo.1

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

投稿日時 - 2019-02-21 23:57:11

あなたにオススメの質問