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);
  }
}
相关推荐
lichenyang4534 分钟前
为什么需要双线程通信、JavaScriptProxy 和 runJavaScript 分别干什么
前端
以和为贵14 分钟前
前端也能搞懂 RAG:用 JS 手写一条最小检索增强链路
前端·人工智能·面试
风止何安啊19 分钟前
网课倍速痛点解决:一套前端代码实现自由控速播放器
前端·javascript·node.js
牧艺28 分钟前
用 Next.js + React Three Fiber 打造 3D 快递仓储可视化
前端·three.js
锋行天下1 小时前
如何用Vite实现Vue组件的按需打包和远程加载
前端·vue.js·前端框架
光影少年2 小时前
原生DOM操作在React 中的注意事项
前端·javascript·react.js
糖拌西瓜皮2 小时前
Node.js核心模块实战:文件、路径、HTTP与流处理
javascript·node.js
糖拌西瓜皮2 小时前
NestJS入门指南:Java开发者的Spring Boot体验
javascript·node.js
糖拌西瓜皮2 小时前
Express框架快速上手:中间件、路由与错误处理
javascript·node.js
用户0926292831452 小时前
CSS 代码调试总踩坑?Gemini 3.5 精准定位修复
css