要素がその要素の直前にある場合、どのようにホバーにスタイルを追加できますか？

Question

a:hover + ul{ 
 
display:none; 
 
}

<li> 
 
    <a>hover me</a> 
 
    <ul> hide me</ul> 
 
</li> 
 
<li> 
 
    <p>change my color</p> 
 
    <ul>hover me</ul> 
 
</li>

私はすぐに次の要素が（上記のように示すように）偶数番目の要素場合ホバーを適用することが可能.Isいた場合、それは「+」を使って特定の要素にスタイルを追加することが可能だということを知っています直前ですか？

Answer 1

CSSセレクタでは不可能ですが、要素の順序をFlexboxで変更し、+セレクタを使用すると、ハックの種類を使用することができます。

div { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
strong:hover + p { 
 
    color: blue; 
 
} 
 
p { 
 
    order: -1; 
 
}

<div> 
 
    <strong>hover me</strong> 
 
    <p>change my color</p> 
 
</div>