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);
  }
}
相关推荐
很晚很晚了12 小时前
纯前端转全栈 Day 1:我从第一个 NestJS 接口开始
前端
Lee川13 小时前
从零解剖一个 AI Agent Tool是如何实现的
前端·人工智能·后端
wangruofeng14 小时前
Playwright 深度调研:为什么它成了浏览器自动化的新底座
前端·测试
李白的天不白16 小时前
SSR服务端渲染
前端
XinZong16 小时前
OpenClaw 实现「龙虾」vs 龙虾 vs 用户 ws对话实现方案 + 实际落地项目
javascript
卷帘依旧16 小时前
WebSocket 比 SSE 复杂在哪里
javascript
卷帘依旧17 小时前
SSE(Server-Sent Events)完全指南
前端
码云之上17 小时前
万星入坞:我们如何用三层插件体系干掉巨石应用
前端·架构·前端框架
kyriewen17 小时前
一口气讲清楚 Monorepo、Turborepo、pnpm、Changesets 到底是什么?
前端·架构·前端工程化
logo_2817 小时前
Xpath语法规则的学习和使用
javascript·python·xpath·xpath语法