技术栈

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