技术栈

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

青莳吖2024-06-25 8:26

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

只需要给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);
  }
}
上一篇:Linux中ls -lsa 和ls -lst区别
下一篇:查看Angular CLI的可使用版本并同时安装指定版本。
相关推荐
之歆
2 小时前
DAY04_HTML&CSS_从表单到样式的完整学习指南
css·html·产品运营
\xin
3 小时前
pikachu自编exp,xss反射性get,post,存储型xss,dom,dom-x
前端·javascript·xss
是烟花哈
7 小时前
【前端】React框架学习
前端·学习·react.js
qq435694701
8 小时前
JavaWeb08
前端
2401_87845453
9 小时前
html和css的复习(1)
前端·css·html
@PHARAOH
9 小时前
WHAT - git worktree 概念
前端·git
IT_陈寒
10 小时前
我竟然被JavaScript的隐式类型转换坑了三天!
前端·人工智能·后端
我亚索贼六丶
10 小时前
二十六. AI基础概念之如何更好的使用AI
前端
小码哥_常
10 小时前
安卓启动页Logo适配秘籍:告别“奇形怪状”的展示
前端
我亚索贼六丶
10 小时前
二十五.Electron 初体验与进阶
前端
热门推荐
01GitHub 镜像站点02近期有什么ai的新消息,新动态? 2026.4月032026年4月AI大事件深度解读:大模型竞争进入“深水区“042026年AI前瞻:量子AI、具身智能与科学发现的新纪元05在Windows 11上安装Docker的踩坑记录06Codex 接入 DeepSeek API 完整配置文档07codex app每次打开重连5次Reconnecting问题解决082026年4月技术前沿:AI大模型爆发、智能体革命与量子安全新纪元09DeepSeek V4 全面解析:测评、对比、案例及实操指南102026年AI编程工具终极横评:Cursor vs Claude Code vs Copilot