当两个div重叠时删除类
，可以通过以下步骤实现：
- 确定两个div的重叠条件：可以使用CSS的position属性来控制div的定位方式，例如设置为absolute或relative，并通过top、bottom、left、right属性来调整div的位置。当两个div的定位方式相同且位置重叠时，可以认为它们重叠。
- 使用JavaScript或jQuery来检测两个div是否重叠：可以通过获取两个div的位置信息（例如使用offset()方法）来判断它们是否重叠。如果两个div的位置信息有重叠部分，则它们重叠。
- 删除重叠div的类：一旦确定两个div重叠，可以使用JavaScript或jQuery来删除其中一个div的类。可以使用removeClass()方法来移除指定div的类，或者直接修改div的className属性。
以下是一个示例代码，用于检测两个div是否重叠并删除其中一个div的类：
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
.div2 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<script>
var div1 = document.querySelector('.div1');
var div2 = document.querySelector('.div2');
function checkOverlap() {
var rect1 = div1.getBoundingClientRect();
var rect2 = div2.getBoundingClientRect();
if (rect1.top < rect2.bottom && rect1.bottom > rect2.top && rect1.left < rect2.right && rect1.right > rect2.left) {
div1.classList.remove('div1');
}
}
checkOverlap();
</script>
</body>
</html>在上述示例中，我们定义了两个div（div1和div2），并设置它们的位置和样式。通过JavaScript的getBoundingClientRect()方法获取div的位置信息，并使用条件判断来检测两个div是否重叠。如果重叠，则使用classList.remove()方法来删除div1的类。
请注意，上述示例仅为演示目的，实际应用中可能需要根据具体情况进行适当的修改和调整。
相关·内容
1回答
当两个div重叠时删除类
、、、
我使用了flexbox在“main”标签中垂直居中我的内容，但是当添加了太多的内容时，它会溢出到“header”中。有没有一种方法可以计算出，如果div在屏幕上高于某个垂直位置(256px - height设置为header)，它会从“main”(当前设置为.vertical)中删除一个类。我知道.removeClass()删除了这个类，但是我不知道从哪里开始计算垂直位置。
浏览 9提问于2017-01-20得票数 0
1回答
我有这个flex列容器，里面有两个元素，类分别是.one和.two： .container { flex-direction: column; height: 50vh;}
height: 50px;} <div class="container">
<div class="one"><
浏览 6提问于2018-12-19得票数 0
回答已采纳
3回答
这是页面：.other-stories {@media screen and (min-width: 768px) { height: 89%;}
如果我删除上面的代码，div就不会重叠考
浏览 0提问于2016-12-24得票数 0
1回答
根据父位置滚动div
、、、
我有一个带有两个子div的父div。当父对象位于视口中时，应固定第一个子对象。第二个孩子应该滚动到适当的位置，并与第一个孩子重叠。两个子div都应该删除，并在到达父div的底部后立即跟随父div。现在，我正在滚动位置上添加一个类，但我不确定如何检测子对象何时位于父对象的底部，然后删除该类。if (scroll >= 70) {
sticky.addC
浏览 4提问于2017-07-12得票数 2
我试着做一个函数，在鼠标切换时显示一个按钮，在鼠标关闭时隐藏。下面的例子将展示我的问题所在。$('#div2').mouseover(function() {});
$("#button2但为了让人更容易看到：
<div id='div1'> <div</em
浏览 3提问于2013-09-15得票数 1
回答已采纳
1回答
当我用我的iPhone测试站点时，有些链接不起作用，但它们在我的桌面计算机上正常工作。我想弄清楚这是否是css/js的问题。我以前没有遇到过这个问题，所以我在想办法调试它时遇到了一些困难。<div class="row">
<div id="primary" class="content-area main-content-inner col-sm-12 col-md-8 pull-left</div>
浏览 2提问于2014-11-28得票数 0
回答已采纳
1回答
我试图把它们垂直叠加在一起，但由于某些原因它们是重叠的，并且不确定它们是否与定位有关。我不太擅长CSS。另外，是否有一种更简单的方法使日期时间跨度与右侧对齐，而不是使用填充-左侧:1140 an？谢谢 <span class="name">John Doe</span>
<span class="datetime">May 2022</span><br&g
浏览 6提问于2022-06-27得票数 1
2回答
假设我想包含A作为B的一部分$(document).ready(function() { });
我的问题是，A使用自己的CSS样式集，这些样式会在加载A时覆盖
浏览 0提问于2013-05-28得票数 0
回答已采纳
3回答
我有两个div应该占用整个页面，而每个div是页面的50% (50 is )，但是一旦我应用了调整大小的方法，当大小变得越来越小时，元素就会重叠，有什么解决办法吗？我想要实现整个页面的典型消失，它被从视图中删除，而不是重叠。 background-color: red; background-color: blue; height: 50vh;<div
浏览 5提问于2022-10-30得票数 0
回答已采纳
2回答
现在，当两个网格项目共享相同的行和列时，它们相互重叠。<div class="some-grid-container"> <divstyle="grid-row: 1; grid-column: 1">Item 2
浏览 0提问于2018-04-23得票数 6
当蓝色框(id名称"hehao") 与红色框(id名称“”)重叠时，将弹出一个带有类名"londonClass“的隐藏div。这是我的问题:隐藏的div不会弹出。hh.getBoundingClientRect()；//获取红盒var document.getElementById(‘london’)的位置；var rect2 = london.getBoundingClientRect()；//比较两个</e
浏览 1提问于2017-01-29得票数 0
回答已采纳
2回答
所以我试着让这个网站对移动设备友好: coveartschildcare.com和所有的头文件都是重叠的，我尝试过的似乎都不起作用。这是我正在使用的CSS：和(最小设备宽度: 320px)和(最大设备宽度: 568px)和(-webkit-min-设备像素比率: 2) { float: left; { color: #777;}
div</e
浏览 3提问于2016-03-15得票数 1
2回答
而不是立即改变背景颜色，甚至在两个背景颜色之间褪色，我想首先立即切换到黄色，然后褪色到合适的颜色。显然，我需要用一种不同的方式来实现这一点。当附加到添加和删除的类时，我一定没有掌握什么时候实际发生转换的基
浏览 0提问于2011-05-12得票数 0
回答已采纳
1回答
在Chrome中，菜单尊重容器填充，并留出100 is的空白，但在Firefox中，菜单是重叠的填充。
浏览 2提问于2016-03-31得票数 0
2回答
在我的网站上(不是英文的，很抱歉)-中间和右边的栏重叠了，请看屏幕截图了解详细信息：在左边和中间的列之间，你可以看到一个绿色背景的“间隙”--这是意料之中的，而且很好。但是中心列和右列之间没有任何间隙，相反，它们是重叠的。没有应用于列的特殊格式。
浏览 0提问于2011-01-02得票数 2
回答已采纳
1回答
如何跟踪重叠的DIVs
、、、
我有四个div，它们是用大小、高度和位置动画化的；这意味着，这些div改变了它们的高度、宽度、左边和顶部。当这两个div**s中的任何一个被重叠时，我想要停止这个动画。**<div id="container_1"> <div i
浏览 3提问于2011-05-03得票数 0
回答已采纳
我正在尝试通过css类订阅事件。我有两个处理程序，定义如下： $('.refresh-cart').click( 'text'); );当这些处理程序重叠时&l
浏览 0提问于2011-04-12得票数 0
回答已采纳
我的情况是:我有两个部分重叠的Div，每个都有悬停效果:Div 1-包含一个条形图，其中的条形图对悬停有影响。Div 2-是一个覆盖屏幕底部20%的区域，当用户悬停在屏幕上(例如，靠近屏幕底部)时，一个控件从底部滑行，允许他们将全局属性更改为表。编辑:添加了一个小提琴，我认为这将说明我的问题：
所以，如果你悬停到“桌子”的底部(在悬停时变成绿色的大红方)，当我点击导致表控件向上滑动的区域时，表就失去了它的悬停状态--我希望它仍然能检测到悬停状态heig
浏览 6提问于2013-07-23得票数 3
回答已采纳
2回答
所以我有一个装有内容的容器和两个侧面的抽屉(左/右)，当打开时，它们会挤压内容的宽度。当一个侧面板打开时，"content“div会被推到800px，因为侧面板的宽度是200px。当两个侧面板都打开时，"content“div是600px。我想要一个脚本，添加/删除类".small“动态到”内容“目录时，它是小于&
浏览 2提问于2015-12-15得票数 1
2回答
相对z指数法
、、、
我试图用等距格式重叠的图像来设计一张地图。现在，我有两个不同的设计，每个解决对方的问题。下面是当前的设置：
左边的显示器有垂直重叠的问题，右边的显示器有横向重叠的问题。我知道这是因为当将z索引应用于父容器时，随后应用于子容器的z索引被本地化在父容器中.但我仍然需要“行”效应来跨越多个父类div。我知道一种解决方案就是不给父div分配z索引，只为每一行分配升序/降序z索引，但在最终产品中，父div将被动态创建
浏览 0提问于2013-04-16得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
