自动生成logo,南通关键词优化软件,wordpress返回404页面跳转,建设体育课程基地网站前言相信很多项目中都会有这样一个小需求(PC端#xff0c;移动端则是点击)#xff0c;鼠标移上某个菜单或者某个位置#xff0c;显示一个弹出框#xff0c;移开则隐藏弹出框#xff0c;就是css中hover效果#xff0c;这种通常做法是每个子菜单下都有一个弹框#xff0c;…前言相信很多项目中都会有这样一个小需求(PC端移动端则是点击)鼠标移上某个菜单或者某个位置显示一个弹出框移开则隐藏弹出框就是css中hover效果这种通常做法是每个子菜单下都有一个弹框父元素相对定位子元素绝对定位只需要控制的弹框的显示与隐藏即可但是当鼠标移动到边界的菜单上时弹框可能会超出外部元素的范围如下图解决办法动态的计算弹框距离外部元素的位置即获取元素的offsetLeft、offsetTop、offsetWidth、offsetHeight如果弹框的宽度(offsetWidth)距离左边的距离(offsetLeft)大于父元素的宽度则判断为超出外部元素范围需要动态改变弹框距离边框的位置下面是对offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop图解注意这里对弹框的布局有限制虽然弹框要隐藏但是不能使用display:none的方式隐藏可以使用opacity:0或者visibility: hidden隐藏元素因为display:none方式不能获取到元素的高度宽度等下面是我写的一个demoTitle#box {width: 500px;height: 500px;background: #0a67fb;margin: 100px auto;position: relative;}#inner-box {width: 200px;height: 200px;background: #00F7DE;position: absolute;top: 50px;left: 320px;visibility: hidden;}var box document.querySelector(#box);var innerbox document.querySelector(#inner-box);box.onmouseenter function (e) {var wrapperBoxWidth box.offsetWidth;// 获取父容器宽度var wrapperBoxHeight box.offsetHeight;// 获取父容器高度var innerBoxWidth innerbox.offsetWidth;// 获取弹框宽度var innerBoxHeight innerbox.offsetHeight;// 获取弹框高度var innerBoxLeft innerbox.offsetLeft;// 获取弹框距离左侧宽度var innerBoxTop innerbox.offsetTop;// 获取弹框距离顶部高度innerbox.style.visibility visible // 鼠标移入时显示弹框// 如果弹框宽度距离左侧宽度大于外部元素的宽度则右侧溢出if (innerBoxLeft innerBoxWidth wrapperBoxWidth) {innerbox.style.left autoinnerbox.style.right 10px}// 如果弹框高度距离顶部高度大于外部元素的高度则底部溢出if (innerBoxTop innerBoxHeight wrapperBoxHeight) {innerbox.style.top autoinnerbox.style.bottom 10px}}box.onmouseleave function () {innerbox.style.visibility hidden // 鼠标移开时隐藏弹框}以上代码亲测可以解决弹框溢出问题如果道友有更好的解决办法欢迎指出不胜感激
