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);
  }
}
相关推荐
fanruitian10 分钟前
python 进程 线程
java·前端·python
ZoeLandia15 分钟前
React03:useState 与不可变更新
前端·react.js·typescript·react
蒲公英内测分发31 分钟前
智能手表卖出去后,包装、说明书和官网里的 App 下载入口怎么统一?
前端·人工智能·测试工具·智能家居·智能硬件·智能手表
溪语流沙39 分钟前
【Web全栈进阶】监控与告警:线上系统的“体检报告”
前端·vue.js·python·fastapi
鬼手点金43 分钟前
单轮对话:最简单的 API 调用
java·服务器·前端·javascript·react.js·servlet·tomcat
罗丹丹Luna1 小时前
JavaScript计算任务峰值并发:同一时刻先结束还是先开始
javascript
燕落南枝1 小时前
CSS 字体样式:颜色、字体族、倾斜、加粗与装饰
前端·css
鬼手点金1 小时前
消息的四种角色
java·前端·人工智能·git·深度学习
陈随易2 小时前
副业搞钱之代办永不过时
前端·后端·程序员
古夕2 小时前
同样的 font-weight,为什么这个项目的字体就是更细?
前端·javascript