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);
  }
}
相关推荐
撑伞的鱼993725 分钟前
2026年前端AI编程工具评测:Figma 还原、组件复用、跨文件联动三项对比
前端·ai编程·figma·效率工具·ai编程工具
码视野30 分钟前
基于 Vue3 + Element Plus 的【微短剧剧本智能创作与分镜生产协同系统】设计与实现(含PRD/三端源码/大屏)
前端·人工智能·vue3
zzzzzz3101 小时前
36K stars 的“酷炫组件”,到底该怎么用才不显得用力过猛?
前端·react.js·动效
2401_894915534 小时前
GEO 优化源码全解析:从搜索引擎到 AI 引擎的底层改写逻辑
java·服务器·前端·数据库·人工智能·分布式·搜索引擎
rockey6278 小时前
C#脚本引擎之AScript与Jurassic、Jint对比
javascript·c#·.net·js·script·动态脚本
Profile排查笔记9 小时前
指纹浏览器哪个好?从 Profile、代理、权限和自动化能力判断是否适合
前端·人工智能·后端·自动化
lzhdim10 小时前
12、JavaScript常见的内存泄露问题 - JavaScript学习系列文章
开发语言·前端·javascript·学习·ecmascript
denggun1234510 小时前
yield
前端·数据库·python
前端snow10 小时前
ai agent -- prompt汇总
前端
muddjsv11 小时前
前端性能优化实战:从加载到渲染的全面提速指南
前端·性能优化