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

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

这是与两个按钮元素相关的HTML5代码。例如，我们将称为“我饿了”按钮、按钮A和“给我看更多”按钮B

.btn:link，
.btn:已访问{
显示：内联块；
填充：10px 30px；
字体大小：300；
文字装饰：无；
边界半径：100px；
文本对齐：居中；
颜色：白色；
过渡：背景色0.5s；
过渡：宽度0.5s；
}
.btn完整：链接，
.btn完整：已访问{
背景色：#2ecc71；
边框：2px实心#2ec71；
宽度：14%；
}
.btn ghost:link，
.btn ghost:已访问{
边框：2px实心#2ec71；
宽度：20%；
}
.btn:悬停，
.btn：活动{
背景色：#27ae60；
颜色：白色；
}
.btn已满：悬停，
.btn已满：活动{
宽度：16%；
}
.btn幽灵：悬停，
.btn重影：活动{
宽度：22%；
}

---

使用flex grow属性可以实现此效果

.container{
宽度：500px；
显示器：flex；
}
.btn{
背景颜色：浅绿色；
边框：2倍纯绿；
填充：8px；
柔性生长：1；
过渡：所有5秒；
}
.btn:悬停{
柔性生长：2；
}

---

使用flex grow属性可以实现此效果

.container{
宽度：500px；
显示器：flex；
}
.btn{
背景颜色：浅绿色；
边框：2倍纯绿；
填充：8px；
柔性生长：1；
过渡：所有5秒；
}
.btn:悬停{
柔性生长：2；
}

以下解决方案使用父元素接收
：hover
的事实：


。按钮a{
浮动：左；
宽度：5em；
高度：3em；
边缘：0 1米；
边界半径：3em；
文本对齐：居中；
线高：3；
颜色：#fff；
背景：海军；
转换：.5s
}
.按钮：将鼠标悬停在{
宽度：3em；
背景：灰色
}
.按钮：悬停a：悬停{
宽度：7em；
背景：森林绿
}

以下解决方案使用父元素接收
：hover
的事实：


。按钮a{
浮动：左；
宽度：5em；
高度：3em；
边缘：0 1米；
边界半径：3em；
文本对齐：居中；
线高：3；
颜色：#fff；
背景：海军；
转换：.5s
}
.按钮：将鼠标悬停在{
宽度：3em；
背景：灰色
}
.按钮：悬停a：悬停{
宽度：7em；
背景：森林绿
}

插入html代码plsdisplay:table/flex和grid可以管理此功能。虽然内联块不会插入html代码，但plsdisplay:table/flex和grid可以管理它。而内联块不会