CSS 过渡移动单独的 DIV

Question

我正在尝试根据 anchor 标记的悬停状态为 DIV 设置动画，但没有任何反应。有人能告诉我哪里出错了吗？演示在底部。

.blue {
    background-color: aqua;
    display:block;
    width:100px;
    height:100px;
    position:absolute;
    margin-top:100px;
    -webkit-transition(margin-top 2s ease-in);
 }
a.yellow {
    background-color: yellow;
    display:block;
    width:100px;
    height:100px;
    position:absolute;
    margin-top:0px;
    -webkit-transition(margin-top 2s ease-in);
}
a.yellow:hover + .blue {
    -webkit-transition(margin-top 2s ease-in);
    margin-top:400px;
}

  <nav>
     <a class="yellow" href="#">YELLOW</a> 
  </nav>

  <div class="blue"></div>

演示:http://jsfiddle.net/liquidengine/btztS/

Answer 1

只有将要移动的元素放在要悬停的元素内才能执行此操作。

喜欢:

<nav>
  <a class="yellow" href="#"><div class="blue"></div>YELLOW</a>
</nav>

和 CSS:

.blue {
    background-color: aqua;
    display:block;
    width:100px;
    height:100px;
    position:absolute;
    margin-top:100px;
    -webkit-transition:margin-top 2s ease-in;
}
a.yellow {
    background-color: yellow;
    display:block;
    width:100px;
    height:100px;
    position:absolute;
    margin-top:0px;
    -webkit-transition:margin-top 2s ease-in;
}
.yellow:hover .blue {
    margin-top:400px;
}