介绍
:hover 选择器
| 选择器 | 示例 | 示例说明 | CSS |
| :hover | a:hover | 选择鼠标在链接上面时 | 1 |
转换属性
| Property | 描述 | CSS |
| transform | 适用于2D或3D转换的元素 | 3 |
2D 转换方法
| 函数 | 描述 |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
运行结果
代码
HTML
<div id="box"> <ul class="box-card"> <li v-for="(item, index) in list" :key="index"> <el-card> <div> <p>鼠标悬停</p> </div> </el-card> </li> </ul> </div>
CSS
.box-card :hover { transform: scale(1.1); transition: all 1s ease 0s; -webkit-transform: scale(1.1);//-webkit-解决浏览器兼容问题 -webkit-transform: all 1s ease 0s; }
