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);
  }
}
相关推荐
GISer_Jing1 分钟前
React 18+ 高级特性实战与面试精讲
javascript·react.js·面试
吴声子夜歌3 分钟前
ES6——异步操作和async函数详解
前端·ecmascript·es6
小小小米粒17 分钟前
生命周期 = Vue 实例从创建 → 挂载 → 更新 → 销毁的全过程钩子函数computed = 基于依赖缓存的计算属性
前端·javascript·vue.js
IT_陈寒26 分钟前
Vue的响应式更新把我坑惨了,原来是这个问题
前端·人工智能·后端
gyx_这个杀手不太冷静27 分钟前
大人工智能时代下前端界面全新开发模式的思考(一)
前端·人工智能·ai编程
冰暮流星28 分钟前
javascript之dom访问css
开发语言·javascript·css
Java小卷42 分钟前
FormKit源码二开 - 校验功能扩展
前端·低代码
xiaotao1311 小时前
第二十一章:CI/CD 最佳实践
前端·ci/cd·vite·前端打包
C澒1 小时前
IntelliPro 企业级产研协作平台:数据可视化全流程拆解
前端·数据可视化
蓝黑20201 小时前
Vue组件通信之slot
前端·javascript·vue