Как можно добавить стиль при наведении, если элемент является непосредственным предшественником этого элемента?

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>

Я знаю, что можно добавить стиль к конкретному элементу, используя «+», если это непосредственный следующий элемент (как показано выше) .а можно применять парить даже если элемент немедленно?

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>