鼠标悬停阴影的效果被旁边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;
相关推荐
IMPYLH5 分钟前
HTML 的 <h1>–<h6> 元素
前端·javascript·html
IMPYLH8 分钟前
HTML 的 <head> 元素
前端·html
卸任28 分钟前
AI英语学习助手:从翻译工具到 AI 英语学习助手
前端·electron
计算机魔术师29 分钟前
A股人形机器人第一股来了!宇树科技8月19日上市,一签或赚20万
前端
PedroQue9935 分钟前
Vue Router 4.x风格导航守卫全面升级
前端·uni-app
cindershade40 分钟前
前端大文件上传完整方案:分片上传、断点续传、秒传与失败重试
前端
HjhIron43 分钟前
NestJS 入门指南:从工厂模式到模块化 CRUD 实战
前端·nestjs
HjhIron1 小时前
手把手教你用 Next.js 14 + Redis 从零搭建一个全栈 Markdown 笔记系统
前端·全栈·next.js
WIN赢1 小时前
【抽象思想-从复杂中抽离简单、收敛的口子】
java·前端·javascript