Question

基本上，这个想法是当用户在列上悬停时，它将根据给定的宽度进行扩展。很像这个网站http://outdatedbrowser.com/

基本上这就是我到目前为止所做的事情

<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%;}

起初我尝试不使用position：absolute，但是最后一列继续在底部折叠。绝对位置的问题是，每当我将鼠标悬停在最后一列时，它将显示一个水平滚动条。是否有可能只用CSS

来实现这一点

Answer 1

将第5列调整为额外的10％宽度：

.col5:hover{left:70%}

JSFiddle Here

Answer 2

<强> 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%}

在悬停时扩展Div

2 个答案: