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);
  }
}
相关推荐
大漠_w3cpluscom14 小时前
CSS 技巧:CSS 中选择 html 元素的各种奇技淫巧
前端·css·weui
吴声子夜歌14 小时前
JavaScript——异步编程
开发语言·前端·javascript
吴声子夜歌15 小时前
TypeScript——命名空间
javascript·ubuntu·typescript
陈随易15 小时前
农村程序员聊五险一金
前端·后端·程序员
恋猫de小郭15 小时前
Swift 6.3 正式发布支持 Android ,它能在跨平台发挥什么优势?
android·前端·flutter
xujing_0615 小时前
跑马灯组件vue3+es6
前端·javascript·es6
小小善后师15 小时前
告别周报烦恼:我用 200 行代码打造了一个 AI 工时助手
前端
我只是来分享的15 小时前
Js也能写外挂?8 行代码改掉《植物大战僵尸》的阳光值!对于js来说超越调用大漠超越调用memory.js
javascript
Mahut15 小时前
我们是怎么用 TanStack 全家桶的
前端·javascript·架构
FreeBuf_15 小时前
Claude浏览器扩展漏洞允许通过任意网站实现零点击XSS提示注入
前端·网络·xss