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);
  }
}
相关推荐
爱勇宝17 分钟前
人生没有最好的年龄,只有最好的状态
前端
mONESY25 分钟前
React + TypeScript 入门到进阶:从 Props 类型约束到状态管理与副作用最佳实践
javascript
幼儿园技术家26 分钟前
前端 Node 全家桶
前端·js or ts
无人生还28 分钟前
从 Vue3 到 React · 快速上手系列第 9 篇:自定义 Hook(对标 Composables)
前端·vue.js·react.js
张龙68739 分钟前
RAG 知识库问答系统实战:分块、混合检索、RRF 融合与重排全链路拆解
前端
用户13060956072340 分钟前
第二章学完后,我对 webpack5 前端工程化的一点理解
前端
a11177641 分钟前
小鸡下蛋 小游戏 html
前端·开源·html
码哥DFS1 小时前
算法练习day1-备战2027届秋招
前端·javascript·数据结构·算法
张元清1 小时前
React useInfiniteScroll Hook:无限滚动轻松实现(2026)
javascript·react.js
Bigger1 小时前
因为一句「华流才是最屌的」,我做了一个中国风设计的 Skill
前端·人工智能·设计