如何在 css3 中缩小一个元素同时放大另一个元素

Question

我的网站上有两个按钮。当有人将鼠标悬停在按钮 A 上时，它应该变大一点，而按钮 B 变小一点。当有人将鼠标悬停在按钮 B 上时，反之亦然。我的问题是，如何从另一个 div class.[= 中更改 div class 的大小元素13=]

这是与两个按钮元素相关的 HTML5 代码。为了示例起见，我们将调用“我饿了”按钮，按钮 A。和“显示更多”按钮 B。

.btn:link,
.btn:visited {
  display: inline-block;
  padding: 10px 30px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 100px;
  text-align: center;
  color: white;
  transition: background-color 0.5s;
  transition: width 0.5s;
}

.btn-full:link,
.btn-full:visited {
  background-color: #2ecc71;
  border: 2px solid #2ecc71;
  width: 14%;
}

.btn-ghost:link,
.btn-ghost:visited {
  border: 2px solid #2ecc71;
  width: 20%;
}

.btn:hover,
.btn:active {
  background-color: #27ae60;
  color: white;
}

.btn-full:hover,
.btn-full:active {
  width: 16%;
}

.btn-ghost:hover,
.btn-ghost:active {
  width: 22%;
}

<a class="btn btn-full" href="#">I’m hungry</a>
<a class="btn btn-ghost" href="#">Show me more</a>

所以作为另一种形式的例子。当我将鼠标悬停在按钮 A 上时，它应该从 14% 增长到 16%，而按钮 B 应该同时从 22% 缩小到 20%。

Answer 1

您可以使用 flex-grow 属性实现此效果。 reference w3schools

.container {
  width: 500px;
  display: flex;
}

.btn {
  background-color: lightgreen;
  border: 2px solid green;
  padding: 8px;
  flex-grow: 1;
  transition: all.5s;
}

.btn:hover {
  flex-grow: 2;
}

<div class="container">
  <a class="btn" href="#">I’m hungry</a>
  <a class="btn" href="#">Show me more</a>
</div>

Answer 2

以下解决方案利用了父元素也接收 :hover 的事实：

.buttons a {
  float:left;
  width: 5em;
  height: 3em;
  margin: 0 1em;
  border-radius: 3em;
  text-align: center;
  line-height: 3;
  color: #fff;
  background: navy;
  transition: .5s
}

.buttons:hover a {
  width: 3em;
  background: grey
}

.buttons:hover a:hover {
  width: 7em;
  background: forestgreen
}

<div class="buttons">
  <a href="#">A</a>
  <a href="#">B</a>
</div>

如何在 css3 中缩小一个元素同时放大另一个元素

How do I shrink one element while enlarging another in css3

html

css

button

css-transitions