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);
  }
}
相关推荐
圣殿骑士-Khtangc36 分钟前
Go字符串高效拼接性能对比与底层原理分析
服务器·前端·golang
BigTopOne1 小时前
【ijkplayer】 硬解码流程
前端
kyriewen2 小时前
DeepSeek Harness开源第一天我就上手了——和Claude Code的差距比想象中大
前端·ai编程·deepseek
捡田螺的小男孩2 小时前
什么是 Skill?手把手带你写一个简单有用的 Skill!
前端·后端·程序员
IT_陈寒2 小时前
Redis集群这个坑,差点让我通宵
前端·人工智能·后端
90后的晨仔2 小时前
uni-app 路由跳转与页面导航 —— 终极详解(对标 iOS / Android / 鸿蒙三端原生)
前端
Heo3 小时前
大厂前端调试不能只会debugger
前端·javascript·面试
用户2181697049303 小时前
Flutter (十七) 网络请求
前端
cidy_983 小时前
React 19 + Vite 企业级前端项目:从零搭建到规范交付
前端
用户921080262863 小时前
如何把一张图片做成自定义复杂 UI 图标
前端