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);
  }
}
相关推荐
只与明月听1 分钟前
RAG深入学习之Emabedding
前端·python·面试
We་ct4 分钟前
React Scheduler & Lane 详解
前端·react.js·前端框架·reactjs·个人开发·任务调度·优先
小道士写程序18 分钟前
Babylon.js WebGPU Ocean Demo — 完整踩坑记录
开发语言·javascript·ecmascript
kgduu20 分钟前
js之json处理
前端·javascript·json
@木尘33 分钟前
前端面试【 八股文篇】
前端·面试·职场和发展
吴佳浩40 分钟前
OpenClaw、Claude Code 等 Agent 为什么都选择 Node.js?
前端·人工智能·langchain
小小小小宇44 分钟前
React 19 useActionState 深度解析 & Vue 2.7 移植实战
前端
远山枫谷1 小时前
Vue2 vs Vue3 全面对比(含代码示例+迁移指南)
前端·vue.js
z止于至善1 小时前
服务器发送事件(SSE):前端实时通信的轻量解决方案
前端·web·服务器通信
小小小小宇1 小时前
React useState 深度源码原理解析
前端