屏幕滑動（無JS）的CSS動畫標題

我試圖用CSS創建簡單的自動隱藏菜單/標題。我使用過渡，但我認爲這不是重點。當我懸停標題是應該滑下來，並顯示整個內容，當我移動鼠標它應該上滑。這個對我有用。我還希望屏幕內容在標題爲slidedup時展開。這是市長問題。我知道在整個頁面（屏幕）上擴展div的唯一方法是修正其頂部，底部，左側&的權利。當最高價值發生變化時，它不起作用。屏幕滑動（無JS）的CSS動畫標題

請看看我的代碼示例： http://jsbin.com/ahamid/2/edit

綠色的部分是有問題的。我試圖通過改變鼠標懸停的最大值來修復它 - 但是，當鼠標不在標題外的內容&時也不起作用。

下面是代碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <div id="main"> 
    <div id="head"> 
     <span> header </span> 
    </div> 
    <div id="content"> 
     <span> 
     test content 
     </span> 
    </div> 
    </div> 
</body> 
</html>

和css：

body { 
    position: relative; 
} 
#main { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    bottom: 0px; 
    background-color: white; 
} 
#head { 
    display: block; 
    height: 50px; 
    top: -44px; 
    right: 0px; 
    left: 0px; 
    background-color: #fcc; 
    margin: 0px 3px; 
    position: absolute; 
    transition: 0.5s; 
    -moz-transition: 0.5s; 
    -webkit-transition: 0.5s; 
    -o-transition: 0.5s; 
} 
#head:hover { 
    height: 50px; 
    background-color: red; 
    top:0px; 
    transition: 1s; 
    -moz-transition: 1s; 
    -webkit-transition: 1s; 
    -o-transition: 1s; 
} 
#content { 
    background-color: cfc; 
    position: absolute; 
    top: 50px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    margin: 3px; 
    transition: 1s; 
    -moz-transition: 1s; 
    -webkit-transition: 1s; 
    -o-transition: 1s; 
} 
#head span { 
color: black; 
font-weight: bold; 
transition: 0.5s; 
-moz-transition: 0.5s; 
-webkit-transition: 0.5s; 
-o-transition: 0.5s; 
} 
#head:hover span { 
    color: yellow; 
    transition: 1s; 
    -moz-transition: 1s; 
    -webkit-transition: 1s; 
    -o-transition: 1s; 
} 
#content:hover { 
    top: 6px; 
transition: 0.5s; 
-moz-transition: 0.5s; 
-webkit-transition: 0.5s; 
-o-transition: 0.5s; 
}

來源

2013-03-10 Saram

我覺得現在的問題是，你設置的＃內容，你希望它是上徘徊。

你真正想要的是什麼，它始終是這樣的，只有改變它;在#head

變化的懸停（向下增加頂部）＃內容到：

#content { 
    background-color: cfc; 
    ..... 
    top: 6px; 
    ..... 
}

和修改頭懸停頂部：

#head:hover ~ #content { 
    top: 50px; 
    transition: 0.5s; 
    -moz-transition: 0.5s; 
    -webkit-transition: 0.5s; 
    -o-transition: 0.5s; 
}

你可以這樣做，因爲頭和內容是兄弟，所以你可以使用兄弟選擇。

這樣，它正確的行爲，唯一奇怪的是來自過渡的時刻是不同的，但你可以管理這個:-)

來源

2013-03-10 19:05:27 vals

謝謝！這是完美的！這裏是工作結果：http://jsbin.com/ahamid/7 我壓縮了一點點Css＆試過它與「鄰接兄弟選擇器」，也很好。 – Saram 2013-03-10 20:18:52

屏幕滑動（無JS）的CSS動畫標題

回答

相關問題