CSS轉換移動單獨的DIV

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> 

DEMO：http://jsfiddle.net/liquidengine/btztS/

Answer 1

你可以做到這一點只有當你把你要移動的元素，元素裏面你想成爲徘徊，你可能想要的代碼...

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

像：

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

Answer 2

據我知道在CSS一個+選擇第一兄弟節點。我不認爲它做你想做的事情。

這裏是的jsfiddle

jQuery的片段使用jQuery來改變背景顏色的onclick改變CSS

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

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

此外，我認爲你需要有所更新您的編碼風格的例子。名爲藍色和黃色的分類真的不應該存在，即使在演示中也是如此。另外，在CSS中，你應該使用十六進制或rgb來引用顏色。

這裏是

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