如何同时更改悬停时多个div计数器行的宽度
[英]how to change the width of multiple div countainer columns on hover at the same time
问题描述
I made four vertical side-by-side columns with div containers when a specific column is hovered over I want that column width to increase to 70% and the remaining columns to decrease to 10% floating in there line order 
当特定的列悬停在上面时，我用div容器制作了四个垂直并排的列，我希望该列的宽度增加到70％，其余的列减少到10％，以该行的顺序浮动
for example when column_about is hovered over it will float to the right and increase to 70% while the remaining columns float to the left and decrease to 10% staying in the vertical line. 例如，当column_about悬停在其上方时，它将浮动到右侧并增加到70％，而其余的列浮动到左侧并减少到10％保持在垂直线。 and when the next column column_skills is hovered over it will increase to 70% and float retaliative to where it is positioned while column_about decreases to 10% and floats to the right and columns _ref _port decrease and float left and so-on and so-forth 当下一个列column_skills悬停在其上时，它将增加到70％并向后浮动，以报复其位置，而column_about降低到10％并向右浮动，并且_ref _port列减少，并向左浮动，依此类推
once the column has been increased in width i want to be able to have context appear like images, tables, text, but I do not want the context to look squished when the column in not enlarged. 一旦增加了列的宽度，我希望能够使上下文看起来像图像，表格，文本，但是当列未放大时，我不希望上下文看起来像被压缩的那样。
I am a beginner so i apologize for any confusing lingo thx :) 我是一个初学者，所以对任何令人困惑的术语表示歉意:)
.column_about { background-color: #F8F8F8; width: 40%; height: 700px; float: right; box-shadow: inset 0 0 1px #000; } .column_about:hover { width: 70%; height: 700px; } .column_skills { background-color: #434343; width: 20%; height: 700px; float: left; box-shadow: inset 0 0 1px #000; } .column_skills:hover { width: 70%; height: 700px; } .column_ref { background-color: #FAEBCD; width: 20%; height: 700px; float: left; box-shadow: inset 0 0 1px #000; } .column_ref:hover { width: 70%; height: 700px; } .column_port { background-color: #F7C873; width: 20%; height: 700px; float: left; box-shadow: inset 0 0 1px #000; } .column_port:hover { width: 70%; height: 700px; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="res.css"> <meta charset="utf-8"> </head> <body> <div class="column_about"> <p> about me </p> </div> <div class="column_skills"> <p> skills/experence </p> </div> <div class="column_ref"> <p> references </p> </div> <div class="column_port"> <p> portfolio </p> </div> </body> </html>
1 个解决方案
解决方案1
0 2017-07-19 00:44:27
Added a .column-container that everything is inside, so the columns will be set even, until you hover over a column. 添加了.column-container ，所有内容都在内部，因此列将被设置为偶数，直到将鼠标悬停在列上为止。 There's also a .column class in each column, so the column style wouldn't have to be repeated. 每列中都有一个.column类，因此不必重复列样式。
.column { width: 25%; height: 700px; float: right; box-shadow: inset 0 0 1px #000; overflow: hidden; } .column_about { background-color: #F8F8F8; } .column_skills { background-color: #434343; } .column_ref { background-color: #FAEBCD; } .column_port { background-color: #F7C873; } body:hover .column:not(:hover) { width: 10%; } .column:hover { width: 70%; }
<div class="column-container"> <div class="column column_about"> <p>about me</p> </div> <div class="column column_skills"> <p>skills/experence</p> </div> <div class="column column_ref"> <p>references</p> </div> <div class="column column_port"> <p>portfolio</p> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.