如何在 CSS 中模拟链接的移入效果？

Question

如何实现css移入样式和指定链接的移入效果一样（移入不会影响周围元素）

https://www.weimob.com/?channelSource=baidu10&JH=SCG-%E5%93%8...

以下是我写的链接
https://codepen.io/dx-1010/pen/rNbNOxW

Answer 1

一般最简单最常用的方法就是放大，可以用scale或transform的scale。如果不这样的话就麻烦了，因为这些兄弟元素都在文档流中，所以修改某一个元素，会影响其他的元素，那解决办法就是让他推理文档流，不影响其他元素，这要从基础布局设置上来修改，得不偿失。

.Goods-item:hover{
    scale: 1 1.05;
    transform: translateY(-8px);
}
.Goods-item:hover{
    transform: scale(1, 1.05) translateY(-8px);
}

Answer 2

找不同:

1. 目标网站排列元素是从上到下, 从左到右, 而你是从左到右, 从上到下, 顺序不一样
2. 目标网站的元素:hover时, 只有自身的高度发生了变化, 并未影响到相邻元素和父容器元素高度
3. 目标网站的父容器高度固定: h-[536px]