css - CSS过渡移动单独的DIV

Question

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

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

​</p>

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

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

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

Answer 1

据我所知，css 中的 + 选择了第一个兄弟姐妹。我不认为它做你想做的事。

这是一个使用 jquery 在 jsfiddle 中更改背景颜色 onclick 的示例

用于更改 css 的 Jquery 片段

$(".yellow").hover(function () {
    $(".blue").css("margin-top","300px");
    $(".yellow").css("margin-top","400px");
});​

http://jsfiddle.net/btztS/8/

另外我认为你需要稍微更新一下你的编码风格。名为 blue 和 yellow 的类真的不应该存在，即使在演示中也是如此。另外，在 CSS 中，您应该真正使用 hex 或 rgb 来引用颜色。

这是您可能想要的代码...

http://jsfiddle.net/btztS/7/

.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;
   transition: margin-top 2s;
   -moz-transition: margin-top 2s; 
   -webkit-transition: margin-top 2s; 
   -o-transition: width 2s; 
}

a.yellow:hover {
     margin-top:400px;
}​

Answer 2

仅当将要移动的元素放在要悬停的元素内时，才能执行此操作。

像：

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