CSS转换另一个div（SASS）及其自身//编辑加载顺序问题

我试图得到它，以便当一个div悬停在另一个div上时，另一个div被设置动画，同时悬停的div也被设置动画

到目前为止，我有它，使一个div的工作，我想，但另一个div只动画本身。这是sass代码

@mixin four04-text-label-transitions($class: false, $side:false) {

.#{$side}-label:hover + .#{$class}, .#{$class}:hover {

@if ($class == "fa-home"){
  margin-left: $fa-icon-left - 0.4rem;
  bottom: $bottom + 0.4rem;
} @else if ($class == "fa-search"){
  bottom: $bottom-middle + 0.4rem;
} @else if ($class == "fa-envelope-o"){
  margin-left: $fa-icon-right + 0.4rem;
  bottom: $bottom + 0.4rem;
}

}

.#{$class}:hover + .#{$side}-label, .#{$side}-label:hover {
   opacity: 1;
   @include transition-delay(0);
 }
}

类别：fa主页、fa搜索、fa信封-o 侧面：左、中、右

例如，此时如果我将鼠标悬停在fa home上，fa home将向上移动并向左移动，左侧标签将从不透明度0变为不透明度1。但是，如果我将鼠标悬停在左标签上；不透明度为0-1，但fa home不移动

我在下面放了一把小提琴。这是对正在发生的事情的一个非常基本的描述。你可以看到，如果你把鼠标悬停在下面的第三个正方形上，它的小提琴有点乱，它会在右边显示动画，并且会出现“报告死链接”字样。但是，如果您将鼠标悬停在“报告死链接”上，它会出现，但方块不会移动

我还包括了我的网站上的app.css编译的sass样式表，其中包含了所有样式，因此您可以更清楚地看到它，并且HTML也取自我的网站

我希望这两个元素都能为它们自己和它们的兄弟制作动画

////////编辑//////////

DOM的加载顺序可能有问题

如果fa home位于左标签之前；fa home可以设置这两个元素的动画，但左标签不能设置fa home的动画

如果顺序颠倒，则“效果左”标签可以同时控制这两种效果，但不能控制fa home

---

有没有一种方法可以让两个元素在不使用第三个元素和相互重叠的z索引的情况下彼此动画化？

好的，兄弟选择器似乎只选择DOM中较低的元素。我提出的解决方法是这样放置标记

<div class="icon-text left-label label-top">Go to Homepage</div>
<i class="fa fa-inverse fa-home fa-5x"></i>
<div class="icon-text left-label">Go to Homepage</div>

然后设置.label top以具有更高的z索引

这似乎不是一个很好的方法，但它现在起作用了

如果没有JS，我会很感激任何其他的解决方案