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);
  }
}
相关推荐
一代明君Kevin学长1 分钟前
快速自定义一个带进度监控的文件资源类
java·前端·后端·python·文件上传·文件服务·文件流
4Forsee11 分钟前
【Android】动态操作 Window 的背后机制
android·java·前端
用户904438163246015 分钟前
从40亿设备漏洞到AI浏览器:藏在浏览器底层的3个“隐形”原理
前端·javascript·浏览器
小二李20 分钟前
第12章 koa框架重构篇 - Koa框架项目重构
java·前端·重构
鸡吃丸子24 分钟前
React Native入门详解
开发语言·前端·javascript·react native·react.js
阿蒙Amon28 分钟前
JavaScript学习笔记:12.类
javascript·笔记·学习
qq_4287232430 分钟前
英语歌10个月之前启蒙磨耳朵
前端
Hao_Harrision34 分钟前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | DrinkWater(喝水记录组件)
前端·react.js·typescript·vite7·tailwildcss
SadSunset41 分钟前
(19)Bean的循环依赖问题
java·开发语言·前端
JIngJaneIL43 分钟前
基于Java+ vue图书管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端