在懸停時擴大Div

基本上這個想法是當用戶在一列懸停時，它會根據給定的寬度擴展。就像這個網站http://outdatedbrowser.com/在懸停時擴大Div

基本上這是我迄今

<div class="columns col1"></div> 
<div class="columns col2"></div> 
<div class="columns col3"></div> 
<div class="columns col4"></div> 
<div class="columns col5"></div> 


.columns{ 
    width:20%; 
    height:100%; 
    float:left; 
    position:absolute; 
    -moz-transition:all 0.5s linear 
} 

.columns:hover{width:30%; overflow:visible; z-index:1} 

.col1{background-color:#FC9526;} 
.col2{background-color:#217C9D; left:20%} 
.col3{background-color:#F9BD39; left:40%} 
.col4{background-color:#5C5C8A; left:60%;} 
.col5{background-color:#EA4A36; left:80%;}

起初我嘗試不使用位置來完成：絕對的，但最後一列不斷在底部坍塌。絕對位置的問題是，只要我懸停在最後一列，它將顯示一個水平滾動條。是否有可能只用CSS

來源

2014-06-27 clestcruz

我相信你需要javascript爲這個 – CMPS

實現這一調整第5列留下了一個額外的10％的寬度：

.col5:hover{left:70%}

JSFiddle Here

來源

2014-06-27 02:59:30 jhawes

謝謝你的簡單回答，最讓我困擾的是，當它懸停在其他列。由於列設置爲z-index：1，所以在調整回原始寬度時不會顯示轉換 – clestcruz

我認爲混淆的部分是爲什麼垂直滾動打開。如果不是這種情況，它可能會更直觀地解決。 – jhawes

垂直？我認爲這是水平滾動:) – clestcruz

CSS：

.col1{background-color:#FC9526;} 
.col2{background-color:#217C9D; left:20%} 
.col3{background-color:#F9BD39; left:40%} 
.col4{background-color:#5C5C8A; left:60%;} 
.col5{background-color:#EA4A36; left:80%;}

添加此行的代碼到你的CSS，它會很好地工作

.col5:hover{left:70%}

來源

2014-06-27 03:08:43

在懸停時擴大Div

回答

相關問題