CSS Transition another div (SASS) and itself//编辑加载顺序问题

Question

我试图让它在一个 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-home、fa-search、fa-envelope-o两侧:左、中、右

目前，如果我将鼠标悬停在 fa-home 上，fa-home 会向上和向左移动，并且 left-label 从不透明度 0 变为不透明度 1。但是，如果我将鼠标悬停在 left-label 上；不透明度从 0 变为 1，但 fa-home 没有移动。

我在下面包含了一个 fiddle 。这是对正在发生的事情的非常基本的表示。您可以看到，如果您将鼠标悬停在向下的第三个方 block 上(这有点小问题)，它会向右移动并且会出现“报告死链接”字样。但是，如果您将鼠标悬停在 Report dead link 上，它会出现但方 block 不会移动。

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

http://jsfiddle.net/8fCMA/21/

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

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

看来 DOM 的加载顺序有问题。

如果 fa-home 在 left-label 之前； fa-home 可以为两个元素设置动画，但 left-label 不能为 fa-home 设置动画

如果顺序颠倒，效果也一样(left-label 可以控制两者，但不能控制 fa-home)

有没有办法在不使用第三个元素和 z-index 相互重叠的情况下让两个元素相互动画？

Answer 1

好吧，兄弟选择器似乎只选择 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-index。

这似乎不是一个很好的方法，但它现在有效。

我会很感激任何其他解决方案(不求助于 JS)