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);
  }
}
相关推荐
小陆猿9 分钟前
股票实时行情Echarts动态图表
前端·javascript
Dilettante25825 分钟前
React Server Components 全链路解析:Next.js 构建产物、导航流程与 Payload 格式
前端·next.js
前端付豪27 分钟前
Nest 项目小实践之注册登陆
前端·node.js·nestjs
用户91219176206127 分钟前
日本股票K线图生成实战:基于API的完整对接方案
前端
牛奶27 分钟前
JS随笔:ES6+特性与模块化实践
前端·javascript
牛奶43 分钟前
JS随笔:基础语法与控制结构
前端·javascript
天蓝色的鱼鱼1 小时前
Node.js 中间层退潮:从“前端救星”到“成本噩梦”
前端·架构·node.js
货拉拉技术1 小时前
如何用 AI 做业务级 Code Review
前端·agent·前端工程化
李剑一1 小时前
前端圈子又出新东西了,大幅提升解析速度。尤雨溪推荐,但我不太推荐
前端
前端Hardy1 小时前
HTML&CSS&JS:基于定位的实时天气卡片
javascript·css·html