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);
  }
}
相关推荐
竹林8181 小时前
用 wagmi v2 和 Next.js 14 硬扛 NFT 市场前端:从合约调用失败到批量上架,我踩了这些坑
javascript·next.js
Momo__1 小时前
Vue 3.6 Vapor Mode:跳过虚拟 DOM,性能极致优化
前端·vue.js
少年白马醉春风丶1 小时前
从零构建 AIGC 无限画布:AIGCCanvasFlow 技术全解析
前端·后端·aigc
OpenTiny社区1 小时前
生成式 UI 藏大招!看似露营案例,实则电商集成 GenUI SDK 干货
前端·ai编程·交互设计
Awu12272 小时前
🍎Vue官方Skills深度解读:那些被悄悄藏起来的宝藏
前端·aigc·claude
小小前端仔LC2 小时前
第五篇:前端任务状态管理与实时反馈 (SSE 客户端篇)
前端
LIO2 小时前
Axios Token 无感刷新机制:原理、实现与最佳实践
前端·axios
「已注销」2 小时前
面试分享:二本靠7轮面试成功拿下大厂P6
前端·javascript·面试
Lee川2 小时前
深入浅出:用 React 打造高性能懒加载无限滚动组件
前端·react.js
walking9572 小时前
重新学习前端之JavaScript
前端·vue.js·面试