技术栈

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的可使用版本并同时安装指定版本。
相关推荐
阿珊和她的猫
7 分钟前
TypeScript中的never类型: 深入理解never类型的使用场景和特点
javascript·typescript·状态模式
skywalk8163
27 分钟前
Kotti Next的tinyfrontend前端模仿Kotti 首页布局还是不太好看,感觉比Kotti差一点
前端
RopenYuan
2 小时前
FastAPI -API Router的应用
前端·网络·python
走粥
3 小时前
clsx和twMerge解决CSS类名冲突问题
前端·css
Purgatory001
3 小时前
layui select重新渲染
前端·layui
weixin19970108016
4 小时前
《中国供应商商品详情页前端性能优化实战》
前端·性能优化
九皇叔叔
4 小时前
003-SpringSecurity-Demo 统一响应类
java·javascript·spring·springsecurity
赵孝正
6 小时前
学习的本质是一个工程闭环:从模仿到内化的四阶段方法论(附风电实战案例)
前端·数据库·学习
热门推荐
01GitHub 镜像站点02Qwen3.5-Omni与Qwen3.6模型全面解析(含测评/案例/使用教程)032026年3月AI领域大事件:DeepSeek引领开源风暴04VMware Workstation Pro 17 虚拟机完整安装教程(2026最新)05Claude Code + GLM4.7 避坑指南:解决 Unable to connect to Anthropic services06OpenClaw 请求超时 llm request timed out 怎么解决?3 种方案实测,附完整排查流程07AI 编程效率翻倍:Superpowers Skills 上手清单 + 完整指南08【技术干货】Gemma 4 上手深度指南:本地多模态大模型的新基线09Mac 本地部署 OMLX + 通义千问 Qwen3.5-27B 保姆级教程10UV安装并设置国内源