How to change the style of a sibling div which is above the hovered div

Question

I have a solution to change the style of a div which is below the hovered div and it works, but it does not work if the div is above the hovered div. In the syntax, they generalized it will work for all siblings but it's not working. Is there a solution for it or is it a limitation? Any help would be appreciated!!

css code

   .sibling-hover{
        cursor: pointer;
    }
    .sibling-hover:hover ~ .sibling-highlight {
        background-color: red;
        color: white;
    }

working html code: (sibling below hovered div)

<b>sibling method:</b>
<div>
    <div class="sibling-hover">hover over me</div>
    <div>I do nothing</div>
    <div class="sibling-highlight">I get highlighted</div>
    <div>I do nothing</div>
</div>

not working html code: (sibling above hovered div)

<b>sibling method:</b>
<div>
    <div class="sibling-highlight">I get highlighted</div>
    <div class="sibling-hover">hover over me</div>
    <div>I do nothing</div>
    <div>I do nothing</div>
</div>