使用css懸停在另外兩個元素上時動畫元素

Question

我想在另一個div上懸停時動畫div。 IHAVE下面的代碼

HTML

<div> 
</div> 
<div class="content"> 
</div> 

CSS

div { 
    height: 100px; 
    width: 100px; 
    background: red; 
     transition: all 0.4s ease-in-out; 
} 
.content { 
    height: 20px; 
    width: 20px; 
    background: green; 
    display: none; 

} 
div:hover + .content{ 
    display: block; 
    margin-top: -100px; 
    margin-left: 50px; 
} 

什麼，我試圖做的是，我需要動畫。內容到的margin-top：-100px和保證金左：50px的;從其默認位置，當用戶懸停在這些元素之一。但是，使用此代碼的atm只有在用戶將鼠標懸停在.content上並且以其他方式動畫時才起作用。 （從margin-top：-100px和margin-left：50px;到默認位置）。請原諒我的英語

jsfiddle->http://jsfiddle.net/fTAUk/1/

Answer 1

你需要用div中的內容，並使用一個子選擇。注意我給了更大的div一個id。這裏是CSS：

JS Fiddle

#box { 
    height: 100px; 
    width: 100px; 
    background: red; 
    position: absolute; 
    transition: all 0.4s ease-in-out; 
} 
#content { 
    width: 20px; 
    background: green; 
    height: 0; 
    transition: all 0.4s ease-in-out; 
    position: margin-top: -100px; 
    margin-left: 50px; 
    -webkit-transition: all .8s ease; 
    -moz-transition: all .8s ease; 
    -ms-transition: all .8s ease; 
    -o-transition: all .8s ease; 
    transition: all .8s ease; 
} 
#box:hover > #content { 
    height: 20px; 
}