如何在悬停时定位先前的兄弟姐妹？

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/

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;