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);
  }
}
相关推荐
浪兎兎3 分钟前
Vue CLI笔记
前端·vue.js·笔记
Csvn5 分钟前
Proxy / Reflect 与响应式原理:完整手写一个 mini Vue3 响应式系统
前端
Easy_API7 分钟前
OpenAI三周内第二次降价,GPT-5.6 Sol砍了20%到33
大数据·前端·人工智能·gpt·深度学习
深念Y8 分钟前
07-SSR水合问题实战排查与修复记录
前端·vue·vite·nuxt·ssr·csr·水合
前端炒粉10 分钟前
容器预热预跳转方案
前端·vue.js·性能优化
小二李13 分钟前
第12章 nestjs服务端开发:RBAC权限系统设计
java·linux·前端
tt一点通20 分钟前
前端常用设计模式大全
前端·vue.js
张文君26 分钟前
ubuntu26.04坏块分区隔离急速版
java·前端·python
ttwuai26 分钟前
Go 后台管理系统组件库文档怎么写,才不会坑后续维护?
开发语言·javascript·golang
两只羊ovo28 分钟前
给 Agent 装上手脚:手写 mini-Cursor,从建项目到跑起来
前端