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);
  }
}
相关推荐
Csvn7 分钟前
🖼️ OffscreenCanvas:把 Canvas 绘制搬出主线程,动画卡顿的终极解药
前端
用户69371750013848 分钟前
了解一下 Agent Harness
android·前端·后端
swipe20 分钟前
16|(前端转全栈)前端人排查后端问题:curl、traceId、日志、MySQL、Redis 怎么用?
前端·后端·面试
anyup24 分钟前
uni-app 没有根组件?仅需几行代码实现全局 Toast 和 Modal
前端·架构·uni-app
并不喜欢吃鱼34 分钟前
一.前端web开发:零基础吃透 HTML5 核心知识
前端·html·html5
Hilaku42 分钟前
前端真的比后端简单吗?
前端·javascript·程序员
Canace44 分钟前
为了给视频里的人脸打码,我让 Claude 做了个 Skill
前端·人工智能
zhedream1 小时前
a-select / a-input 自定义下拉、Vue2 Fragment ,以及 transfer-dom
前端·vue.js
无人生还1 小时前
从 Vue3 到 React · 快速上手系列第 10 篇:路由
前端·vue.js·react.js