鼠标悬停阴影的效果被旁边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;
相关推荐
Hi202402172 分钟前
Flask搭建HTML文档服务器-轻松共享和浏览文档
flask·html·阅读器
张风捷特烈1 小时前
匠心千游 | 纯 AI 打造休闲小游戏
前端·微信小程序·游戏开发
longze_75 小时前
Vue中:deep()和 ::v-deep选择器的区别
前端·javascript·vue.js
太阳伞下的阿呆8 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny8 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴9 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔9 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔9 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔10 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_61410 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app