鼠标悬停阴影的效果被旁边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;
相关推荐
沉迷...8 分钟前
el-input限制输入只能是数字 限制input只能输入数字
开发语言·前端·elementui
xx240615 分钟前
date-picker组件的shortcuts为什么不能配置在vue的data的return中
前端·javascript·vue.js
古时的风筝24 分钟前
Caddy 比Nginx 还优秀吗
前端·后端·程序员
Anlici29 分钟前
无脑字节面基🥲
前端·面试·架构
古时的风筝33 分钟前
Cursor 建议搭配 CursorRules 食用
前端·后端·cursor
前端南玖33 分钟前
通过performance面板验证浏览器资源加载与渲染机制
前端·面试·浏览器
树深遇鹿38 分钟前
SSE(Server-Sent Events)的使用
前端·javascript·面试
代码哈士奇40 分钟前
记录一次无界微前端的简单使用
前端
用户20311966009644 分钟前
clipped的基本用法
前端