CSS:对悬停时左列的右列进行动画处理

问题描述 投票:0回答:1

我在这里具有此两列设置,其中,当悬停时,右列在左列上设置动画。左栏不应缩小:

http://jsfiddle.net/frank_o/xv8KV/1/

是否有一种无需使用绝对位置即可获得相同结果的方法?绝对位置为causing headache elsewhere

HTML:

<div class="container">
    <div class="column_1"></div>
    <div class="column_2"></div>
</div>

CSS:

.container {
    position: relative;
}
.column_1 {
    position: absolute;
    width: calc(100% - 120px);
    height: 600px;
    background: blue;
}
.column_2 {
    position: absolute;
    right: 0;
    width: 120px;
    height: 100px;
    background: green;
    -webkit-transition: 500ms width;
    -moz-transition: 500ms width;
    -ms-transition: 500ms width;
    -o-transition: 500ms width;
    transition: 500ms width;
}
.column_2:hover {
    width: 100%;
}
css3
1个回答
1
投票

您可以使用float属性来执行此操作。

.container {
  position: relative;
}

.column_2 {
  margin-right: 120px;
  height: 600px;
  background: blue;
}

.column_1 {
  width: 120px;
  height: 100px;
  background: green;
  float: right;
  -webkit-transition: 500ms width;
  -moz-transition: 500ms width;
  -ms-transition: 500ms width;
  -o-transition: 500ms width;
  transition: 500ms width;
}

.column_1:hover {
  width: 100%;
}
<h1>Hover the green column</h1>

<div class="container">
  <div class="column_1"></div>
  <div class="column_2"></div>
</div>

PS:我将样式替换为列。

© www.soinside.com 2019 - 2024. All rights reserved.