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);
  }
}
相关推荐
deli007几秒前
高尔顿板:把球一颗颗丢下去,为什么最后总堆成一座钟形山
前端
java_nnnn3 分钟前
JavaEE进阶-CSS初识
java·前端·css·java-ee·html
good_ideal4 分钟前
从零实现一个自动提交 PR 的 MCP 工具:用 Skill 串起 Git 与 Azure DevOps
前端
0nirvana05 分钟前
从普通 script 到 ESM:一文搞懂 JavaScript 模块、IIFE 和 window
javascript
喜欢吃豆7 分钟前
Agent 前端协议正在分层:彻底讲清 MCP Apps、AG-UI 与 A2UI
前端·大模型
赵锦川8 分钟前
css代替表格
前端·css
其实防守也摸鱼25 分钟前
内网安全防护实践:从攻击视角理解防御要点
java·前端·安全·架构·自动化·nps
JavaGuide1 小时前
DeepSeek Harness 官方桌面端终于有了!
前端·后端
wshzd1 小时前
LLM之Agent(104)|DeepSeek-Harness(十三)ReactLoopAgent 总览:kick → turn → step
开发语言·前端·javascript
茉莉玫瑰花茶1 小时前
OpenGL [ 基础概念 ]
java·前端·数据库