Css 如何使顶部柔性箱行在悬停时不向下推底部柔性箱行

我已经阅读了类似的问题，但没有看到一个有效的例子。使用“绝对”将使所有图像堆叠在另一个图像之上。我的目标是，当悬停时，当顶行的图像增大时，它不会向下推底行的图像。谢谢大家!

代码如下：

import React，{Component}来自'React'；
从“../../atoms/NavButton/NavButton”导入{NavButton}；
导入“/homepage.css”；
导出默认类扩展组件{
渲染（）{
const{history}=this.props；
返回(
);
}
}

.homepage-outer-flexbox{
显示器：flex；
弯曲方向：立柱；
}
.首页第一排{
显示器：flex；
弯曲方向：行；
弹性：1；
}
.第二排{
显示器：flex；
弯曲方向：行；
弹性：1；
}
.集装箱{
文本对齐：居中；
垂直对齐：中间对齐；
利润底部：20%；
}
.container>img{
最大宽度：65%；
最高高度：65%；
}
.container>img:悬停{
最大宽度：70%；
最大高度：70%；
}

您可以试试这个

.container > img:hover { 
    transform: scale(1.1); /* Or something*/
}

例如：

.img容器{
显示器：flex；
对齐项目：居中；
}
.img容器>img{
最小宽度：0；
宽度：100%；
过渡期：放松；
}
.img容器>img：悬停{
转换：比例（1.1）；
/*还是什么*/
}

为什么在每个

img

上使用冗余的

class=“img”

？您可以使用选择器将

img

作为目标，而不是

.img

.img container>img{…}

你说得对。通常，我使用SCS编写，但我不需要以这种方式使用它，但这里有为每个项目定义单独类的习惯。我更新了。嗨，卡努弗-✔ & +1-当需要时，我仍然会使用不同于“img”的类名，这表明为什么它不是“普通”图像；描述其特殊之处的类。可能是

，如果它正在增长以显示您将选择什么，或者

——让类描述它们所应用到的元素的某些内容；类似于

class=“avatar”的名词或类似于
class=“growtable”的形容词或类似于
class=“selected”的状态。不管怎样，回答得好。@StephenP你说的完全正确。通常，我指定一个类名来实际指定该元素的作用。这里的示例非常简短，包含的项目很少，因此我不需要它。无论如何，谢谢你。