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 小时前
OpenClaw 技术教程大全:从安装到多 Agent 协作,全在这里
java·前端
weixin_4462608517 小时前
提升开发效率的神器!快速选择编码上下文 — React Grab
前端·react.js·前端框架
前端付豪17 小时前
自动学习建议解决薄弱知识点
前端·python·openai
SuperEugene17 小时前
Vite 实战教程:alias/env/proxy 配置 + 打包优化避坑|Vue 工程化篇
前端·javascript·vue.js·状态模式·vite
文心快码 Baidu Comate17 小时前
Comate 4.0的自我进化:后端“0帧起手”写前端、自己修自己!
前端·人工智能·后端·ai编程·文心快码·ai编程助手
We་ct18 小时前
LeetCode 17. 电话号码的字母组合:回溯算法入门实战
前端·算法·leetcode·typescript·深度优先·深度优先遍历
lihaiting118 小时前
css面试题
前端·css·css3
望京十三兄18 小时前
前端排查项目上线后页面白屏
前端
程序员Sunday18 小时前
vite 8 发布,双引擎时代结束,webpack 的时代真的快过去了
前端
xixixin_18 小时前
【CSS】Ant Design 按钮点击时文字位移问题
前端·javascript·html