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 分钟前
网络安全法竞赛知识总结与题库
前端·网络·人工智能·安全·web安全·重构·nc
山雀~7 分钟前
浏览器兼容方案(Web 项目的三层实践)
前端
Jack N14 分钟前
【Strapi 系列之五】前端怎么接?Next.js + Tailwind 拉取 Strapi 数据(含代码)
开发语言·前端·javascript·strapi
__sjfzllv___18 分钟前
在职前端Leader学习/转行 AI Agent -DAY85
前端
来一首_We_go25 分钟前
React Flow Pro 高级交互实现
前端·react.js
weedsfly30 分钟前
React 不可变数据:为什么页面“明明数据变了却不更新
前端·javascript·react.js
行者全栈架构师35 分钟前
【共创稿事节】双引擎智能相册:HarmonyOS 7(API 26)文搜图 × 图像超分端侧 AI 联动实战
前端·算法·架构
chromoany37 分钟前
agent 写的 README 为什么装不上:一条“没有出处就删掉”的规则
前端
deli00737 分钟前
商品条形码最后一位怎么来的?Code128 校验位实测
前端
Gizzap_Tech43 分钟前
双语内容审阅台怎么做?用内容指纹保留核验记录
javascript