與CSS的邊欄

我想做一個CSS側邊欄。它應該隱藏默認情況下，只有這個圖像從右側出來（見下文）。只要用戶將鼠標懸停在這張圖片上，它就會出現並顯示一個帶有一些文字的小盒子。與CSS的邊欄

側邊欄不應位於屏幕高度的右上角，而應位於屏幕高度的一半。我已經可以在左邊沒有動畫的情況下執行此操作（請參閱代碼）。對我來說看起來是不可能的：我討厭CSS（!!!），我希望有人能幫我做到這一點。非常感謝您的耐心和原諒我的問題，但我是一個CSS的大白菜。

編輯：http://jsfiddle.net/WSZbe/1/這是我嘗試到目前爲止...

#side{ 
position:absolute; 
    top:0; 
    left:0; 
    height:40px; 
allign: center; 
background-color: blue;

enter image description here

來源

2012-04-12 Saturnix

那麼，你不能真的用CSS來做到這一點。爲了將頂部放置在窗口頂部50％處，您需要使用JavaScript來獲取窗口的高度。此外，圖像看起來應該是在左邊，而不是在右邊。 – 2012-04-12 13:11:23

我沒有完全理解你需要什麼...你想讓圖像保持在一邊，當你將鼠標懸停在圖像上時顯示該div。用你的實際解決方案，你正在轉移包含你的圖像的div，這不是你想要的，我猜想:-) – Gatekeeper 2012-04-12 13:33:42

#side{ 
position:absolute; 
    top:0; 
    left:0; 
    height:40px; 
allign: center; 
background-color: blue; 
} 
#side:hover{ 
    position:absolute; 
    top:0; 
    left:200px; 
    height:40px; 
    allign: center; 
    background-color: blue; 
}

來源

2012-04-12 01:15:05

根本不起作用。它只是卡在左上角，懸停時，圖像開始來回抖動。在這裏查看結果：http://jsfiddle.net/WSZbe/1/ – Saturnix 2012-04-12 13:00:21

好的，這裏的交易 - 你需要的不僅僅是一個頁面上的div，div需要一個容器來定位它，然後你還需要了解通過純CSS的動畫不會很漂亮。 http://jsfiddle.net/vrxFH/這個。使用jQuery你可以做到這一點，它會更好。 – 2012-04-12 14:06:13

是的，也許在開發頁面之前學習一些關於html/css/javascript，或者如果你「討厭CSS」做了完全不同的事情:-D – Gatekeeper 2012-04-12 14:18:21

像這樣的事情？我沒有時間調整它，但你應該明白，如果多數民衆贊成你想要什麼...

來源

2012-04-12 13:42:24 Gatekeeper

回答

相關問題