css实现鼠标悬停在div上出现抬起元素的效果

如图所示,左侧为正常样式,右侧为添加效果后的样式

只需要给div添加以下class样式,主要实现效果在&:hover里面

复制代码
.component-item {
  display: flex;
  align-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 5px;
  margin-left: 15px;

  &:hover {
    cursor: move;
    box-shadow: 0 4px 16px rgb(0, 0, 0);
  }
}
相关推荐
web守墓人1 小时前
【linux】Mubuntu v1.0.11更新日志
linux·前端
遇见你...4 小时前
TypeScript
前端·javascript·typescript
Highcharts.js4 小时前
Highcharts Grid 中文站正式上线:表格数据处理的全新选择
前端·javascript·数据库·表格数据·highcharts·可视化图表·企业级图表
阿正的梦工坊7 小时前
JavaScript 微任务与宏任务完全指南
开发语言·javascript·ecmascript
懂懂tty8 小时前
CRA 迁移 Rspack(实战)
前端·架构
小码哥_常9 小时前
Kotlin 助力 Android 启动“大提速”
前端
GreenTea9 小时前
AI 时代,工程师的不可替代性在哪里
前端·人工智能·后端
Jagger_9 小时前
能不能别再弄低代码害人了
前端
朦胧之9 小时前
AI 编程开发思维
前端·后端·ai编程
踩着两条虫10 小时前
VTJ:快速开始
前端·低代码·架构