鼠标悬停阴影的效果被旁边div挡住的解决办法

出现的问题

需求要求鼠标悬停某个图片上有阴影效果,但阴影被旁边相邻的div挡住了,如图所示

解决方案

给悬停的这块div增加2个css属性

bash 复制代码
$(this).css('position', 'relative');
$(this).css('z-index', '200');

新的效果如图所示

一直写后端,前端的都忘了,记录一下。

注意:如果谷歌浏览器,edge等没阴影效果,那大概率是没有考虑到兼容性,可以加

bash 复制代码
    -moz-box-shadow: 3px 3px 4px #000;

    -webkit-box-shadow: 3px 3px 4px #000;

    box-shadow: 3px 3px 4px #000;
相关推荐
奔跑的web.3 小时前
TypeScript Enum 类型入门:从基础到实战
前端·javascript·typescript
盐真卿3 小时前
python2
java·前端·javascript
梦梦代码精4 小时前
BuildingAI vs Dify vs 扣子:三大开源智能体平台架构风格对比
开发语言·前端·数据库·后端·架构·开源·推荐算法
seabirdssss4 小时前
《bootstrap is not defined 导致“获取配置详情失败”?一次前端踩坑实录》
前端·bootstrap·html
kgduu5 小时前
js之表单
开发语言·前端·javascript
谢尔登6 小时前
Vue3 响应式系统——computed 和 watch
前端·架构
愚公移码7 小时前
蓝凌EKP产品:主文档权限机制浅析
java·前端·数据库·蓝凌
我是伪码农7 小时前
轮播图案例
css·html·css3
欣然~8 小时前
法律案例 PDF 批量转 TXT 工具代码
linux·前端·python
一个小废渣8 小时前
Flutter Web端网络请求跨域错误解决方法
前端·flutter