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 分钟前
大前端手里的 Next.js:从 #root 到 SEO,一份 HTML 的两种命运
前端·后端
IT_陈寒8 分钟前
Vue的v-for不听话?我被这个Key的坑整懵了
前端·人工智能·后端
王林不想说话32 分钟前
ES6 到 ES2026 全面进阶指南:新特性、原理、示例与工程落地
前端·javascript·面试
用户435237138149334 分钟前
🚀 Vue3 + TypeScript 学习笔记:从泛型 T 到 Promise<T>,终于搞懂了 keyof 和 typeof
前端
跟着群主去吃肉35 分钟前
Cinemachine的应用-第三人称视角
前端·unity3d·游戏开发
东方小月35 分钟前
从零开发一个 Coding Agent(十):实现 CLI 参数解析与静态命令
前端·人工智能·开源
阿黎梨梨37 分钟前
Next.js 全栈开发:从 SPA 的痛点到 SSR 的破局之道
前端·后端
沐道PHP37 分钟前
CRMEB多店版diy装修位置偏移修复
前端
WZzz38 分钟前
JavaScript 中 this 的「指向」完整教程
javascript
犀利的毛豆豆1 小时前
useCallback
前端