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);
  }
}
相关推荐
时间的情敌16 分钟前
WebGIS + OpenLayers + GeoServer + PostGIS #量算 #点聚合
前端·geoserver·openlayers
不可能片场1 小时前
Electron 发布 cookie 库先查明文再写解密
前端·electron
郭小李1 小时前
springmvc 拦截器
java·开发语言·前端
程序员大阳1 小时前
副队长JavaScript教程(60)-BOM 初识:window 对象与浏览器模型
javascript·bom·window对象·浏览器模型
web打印社区1 小时前
Chrome-kiosk-printing能上生产吗
开发语言·前端·javascript·chrome·websocket
白帽攻防录1 小时前
某pc客户端app从xss到rce实战案例
前端·网络安全·黑客·xss·rce·src漏洞·app漏洞
志尊宝1 小时前
AI原生前端开发(041):AI辅助的状态管理(Zustand/Pinia)
前端·javascript·ai-native
修炼的dance1 小时前
pngquant 两档质量后接 oxipng,每步省多少花几秒
前端
费曼学习法1 小时前
无人值守AI内容矩阵实战(10):Windows 无 systemd,进程存活率 99% 怎么做
前端
Geoffwo2 小时前
DSH-SKILL基础
javascript