css - CSS - ホバー時に 2 つの要素の状態を変更する

Question

<li class="red">
<p><a href="#">Home</a></p>
</li>

CSS では、li 要素の背景色を変更したいのですが、テキストの色も変更する必要があります。問題は、li 要素にカーソルを合わせた後でも、色を変更するために、さらに進んで実際にテキストに触れなければならないことです。

これが機能するかどうか、私は驚くでしょう。

Answer 1

<p>最初にタグ を削除します

li.red > a:hover {  
    color: red;  
}

Answer 2

li:hover {
   background-color: blue;
}

li:hover p,
li:hover a {
   color: yellow;
}

Answer 3

考慮すべきことが2つあります。

1. <p></p>ブロックレベルの要素です。インライン要素内では使用されません。この場合、<li></li>

2. <a></a>タグをブロックレベルの要素にするだけです。

したがって、コードは次のようになります。

<ul>
    <li class="red">
       <a href="#">Home</a>
    </li>
</ul>

次に、次のようなCSSを思い付くことができます。

.red a:hover {
   padding: 10px 20px;
   display: block;
   background-color: #9900;
   color: #FFFFFF;
}