css - liがホバーされているときにliとaの両方の背景色を変更するにはどうすればよいですか?

Question

これは私の問題です。このウェブサイトをチェックしてください：

「ゲームをもっと簡単にブラウズ！」と書かれている左側にあります。内部にリンクを持つ 2 つの li 要素があります。私が達成したいのは、liがホバリングされたときにliとaの両方の色が変わることです。

今試してみると、a 要素は、li ではなく、ちょうどその上にホバーしたときにのみ色が変わります。

私は次のことを試しました：

<a href="#"><li>UNDER 5€&lt;/li></a>

しかし、どこにでも text-decoration:none を配置したとしても、li 要素 (文字のすぐ下) に厄介な行が残りました。

score 1 · Accepted Answer

まず第一に、リスト項目はアンカーではなくリスト要素内にある必要があります。それらにリンクを含めたい場合は、アンカーをリスト項目内に配置します。

あなたの質問に答えて、私は使用します

ul:hover li, ul:hover li a {background:red;}

score 1 · Accepted Answer

まず、マークアップを次のように変更します。

<li><a href='#'>Text</a></li>

次に、CSSで次のことができます：

li a:hover{
    background-color: blue;
}

タグaの幅を指定しているため、全体の色が変わります。li

2 に答える 2