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);
  }
}
相关推荐
组态软件3 小时前
web组态软件
前端·后端·物联网·编辑器·html
前端Hardy3 小时前
HTML&CSS:MacBook Air 3D 动画跃然屏上
前端·javascript·css·3d·html
loey_ln4 小时前
观察者模式和发布订阅模式
javascript·观察者模式·react.js
cnsxjean6 小时前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
ZL_5676 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
沉浮yu大海6 小时前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆6 小时前
软件工程第13章小测
服务器·前端·数据库·软件工程
sunly_6 小时前
Flutter:启动屏逻辑处理02:启动页
android·javascript·flutter
EasyNTS6 小时前
H5流媒体播放器EasyPlayer.js网页直播/点播播放器如果H.265视频在播放器上播放不流畅,可以考虑的解决方案
javascript·音视频·h.265
彪8257 小时前
第十章 JavaScript的应用
css·html5