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);
  }
}
相关推荐
Mintopia17 小时前
现代 Vue 3 页面组件文件安排与通信实践
前端
只会cv的前端攻城狮17 小时前
兼容性地狱-Uniapp钉钉小程序环境隔离踩坑实录
前端·uni-app
流水白开17 小时前
前端设计模式
javascript·面试
赵_叶紫17 小时前
Node.js 知识点梳理与实战代码
前端
颜酱17 小时前
从0到1实现LRU缓存:思路拆解+代码落地
javascript·后端·算法
IT_陈寒17 小时前
JavaScript这5个隐藏技巧,90%的开发者都不知道!
前端·人工智能·后端
明月_清风18 小时前
小程序云函数:从入门到全栈的“降维打击”指南
前端·微信小程序·小程序·云开发
wuhen_n18 小时前
告别 Options API:为什么 Composition API 是逻辑复用的未来?
前端·javascript·vue.js
明月_清风18 小时前
前端异常捕获:从“页面崩了”到“精准定位”的实战架构
前端·javascript·监控
wuhen_n18 小时前
高效的数据解构:用 toRefs 和 toRef 保持响应性
前端·javascript·vue.js