前の兄弟をホバーでターゲット設定するにはどうすればよいですか？

Question

私は前の兄弟をホバー上でターゲットにする方法を見つけようとしています。このフィドルでは、編集ボタンが緑色になるようにしたいのですが、削除ボタンの上にマウスを置くと、赤色に変わり、編集ボタンが正常に戻ります。彼らは両方が同じ親にあるので（必然的にそうでなければならない）、これは難しいようです。

私はSASSで作業していることに注意してください。そうするための条件付きの方法がありますか？

FIDDLE

<div class="wrapper"> 
    <button class="btn edit"> 
    Edit 
    </button> 
    <button class="btn delete"> 
    Delete 
    </button> 
</div> 

Answer 1

その後、逆方向にフレキシボックスを使用して、マークアップであなたの要素の位置を逆することができます。そうすれば、[編集]ボタンをターゲットにしながら[削除]をホバーすることができます。

また、Orderプロパティを使用することもできますが、そこにアイテムを追加するかどうかによって異なります。

https://jsfiddle.net/CyberAP/7pye3e8w/2/

.wrapper { 
 
    border: 1px solid black; 
 
    padding: 40px; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: flex-end; 
 
} 
 

 
.btn { 
 
    -webkit-appearance: none; 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
    outline: none; 
 
    padding: 5px 10px; 
 
    font-size: 18px; 
 
    background-color: #ddd; 
 
} 
 

 
.wrapper:hover .edit { 
 
    background: green; 
 
    color: white 
 
} 
 

 
.wrapper .delete:hover { 
 
    background: red; 
 
    color: white 
 
} 
 

 
.wrapper .delete:hover + .edit { 
 
    background-color: #ddd; 
 
    color: #000; 
 
}

<div class="wrapper"> 
 
    <button class="btn delete"> 
 
    Delete 
 
    </button> 
 
    <button class="btn edit"> 
 
    Edit 
 
    </button> 
 
</div>