如何在悬停时定位先前的兄弟姐妹？ [重复]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在悬停时定位先前的兄弟姐妹？ [重复]相关的知识，希望对你有一定的参考价值。
这个问题在这里已有答案：
我正试图找出一种方法来定位上一个兄弟在悬停时。在这个小提琴中，当你将鼠标悬停在整个包装器上时，我希望编辑按钮变为绿色，但当你将鼠标悬停在删除按钮上时，它会变为红色并且编辑按钮恢复正常。因为它们都在同一个父母（必然必须），这似乎很难。
我应该注意到我在SASS工作，所以也许有条件的方式这样做？
<div class="wrapper">
<button class="btn edit">
Edit
</button>
<button class="btn delete">
Delete
</button>
</div>
答案
您可以在标记中反转元素的位置，然后使用反向的flexbox。这样，您可以在将鼠标悬停在“删除”上时定位“编辑”按钮。
或者，您可以使用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>以上是关于如何在悬停时定位先前的兄弟姐妹？ [重复]的主要内容，如果未能解决你的问题，请参考以下文章