Question

我试图在悬停时增加div的宽度，同时高度保持不变。这很难，因为我从填充顶部获得高度：100％，这使它成为一个可调整大小的正方形。因此，当我增加宽度时，高度也会有机地增加。（重要的是div的高度和宽度在正常状态下是相等的，因此它是一个完美的正方形）

我现在迷失了，并且不确定如何实现这一点，任何意见都值得赞赏。

https://jsfiddle.net/9tc2mbwd/2/

.work-container { padding-top: 100%; }

Answer 1

您可以使用视口单元并删除工作包装器，如下所示：

＆＃13;

.work-container {
	width: 30vw;
	height: 30vw;
	transition: all ease 0.5s;
}

.work-container:hover {
	width: 50vw;
}

.work-1 {
	background-color: #FEF102;
}

＆＃13;

<div class="work-container work-1">
</div>

＆＃13;

Answer 2

如果您不想将修正宽度和高度设置为.work-wrapper，那么.. 使.work-container成为悬停元素，并按照以下步骤操作：

.work-wrapper {
 width: 30%;
}
.work-container {
  padding-top: 100%;
  width: 100%;
  transition: all ease 0.5s;
}
.work-container:hover {
  width: 200%;
}
.work-1 {
  background-color: #FEF102;
}

<div class="work-wrapper">
    <div class="work-container work-1">
    </div>
</div>

Answer 3

嗯，你可以先摆脱百分比并将其添加到＆＃34; 。工作-包装＆＃34;：

width:150px;
height:150px;
overflow: hidden;

并保持一切相同！希望这有帮助！

在悬停时增加宽度，在方形衬垫顶部：100％div

3 个答案: