Question

我正在尝试根据锚标记的悬停状态设置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

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

这是一个使用jquery在jsfiddle

中更改背景颜色的示例

用于更改css的Jquery片段

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

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

此外，我认为您需要稍微更新您的编码风格。名为蓝色和黄色的classe确实不应该存在，即使在演示中也是如此。另外在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;
}

CSS过渡移动单独的DIV

2 个答案: