嗨，老伙計們下午好，小弟要做一個 瀏覽器左邊懸浮框（里面用來寫公告和內容），我想讓懸浮框實作展開收納，由于沒有學javascript，請問純css可以實作嗎，如果不可以的話 有好漢可以留下代碼就再好不過了。蟹蟹 比心
uj5u.com熱心網友回復：
多多益善uj5u.com熱心網友回復：
純css可以實作。如果是要滑鼠懸停時展開直接用css的:hover偽類即可。如果是要滑鼠點擊時展開就麻煩一些，需要用一個隱藏的<input type="checkbox" />和對應的<label>再配合css的:checked偽類來做。還不如用js方便。
uj5u.com熱心網友回復：
https://blog.csdn.net/jvhbi/article/details/107003691我的博客，css篇，介紹了只用css，去寫tab欄切換，或者是輪播圖
uj5u.com熱心網友回復：
.left-float{
width: 100px;
height: 200px;
position: fixed;
left: 0;
top: calc(50vh - 100px);
background-color: white;
transition: all 0.5s ease;
}
.left-float:hover{
width: 300px;
}
如果只是滑鼠滑過展開，css可以實作，但是如果是點擊按鈕展開，得用上JS去改變屬性
uj5u.com熱心網友回復：
.notice-box {
width: 200px;
height: 300px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
position: fixed;
top: 50%;
left: -200px;
transform: translateY(-50%);
transition: left .5s;
}
.notice-box .notice-title {
width: 20px;
text-align: center;
padding: 6px 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
background-color: #004974;
color: #fff;
cursor: pointer;
}
.notice-box:hover {
left: 0;
}
<div class="notice-box">
<div class="notice-content">
<p>我是公告</p>
</div>
<div class="notice-title">公告</div>
</div>
uj5u.com熱心網友回復：
怎么樣設定默認是展開的uj5u.com熱心網友回復：
怎么樣默認是展開的uj5u.com熱心網友回復：
默認展開的話，最好用js寫了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/28877.html
標籤：HTML5
上一篇：https請求http