如何检测一个元素是否被另一个元素覆盖/重叠？
如何检测一个元素是否被另一个元素覆盖/重叠？
提问于 2015-09-22 17:25:52
我有一个问题，我想要检测一个元素是否被一个页面中的另一个元素覆盖。
例如：
DOM elements
<div class="ele ele1"><p>A</p></div>
<div class="ele ele2"><p>B</p></div>
<div class="ele ele3"><p>C</p></div>
<div class="cover"><p>D</p></div>
CSS style
.ele{
display: inline-block;
width: 100px;
height: 100px;
position: relative;
}
p{
width: 100%;
text-align: center;
}
.ele1{
background-color: red;
}
.ele2{
background-color: blue;
}
.ele3{
background-color: green;
}
.cover{
position: absolute;
width: 100px;
height: 100px;
left: 300px;
top: 10px;
background: grey;
}http://jsfiddle.net/veraWei/6v89b1fy/
如何检测元素A未被覆盖但元素C被元素D覆盖？还有一件事："D“的数量是不确定的。也许有E/F/G...在页面上。感谢您的所有想法或现有示例/jQuery插件/CSS/等。
感谢你们所有人的详细回答。但我需要更多的解释，也许是一个属性，表明A没有被任何元素覆盖，而C被呈现覆盖。是否存在任何插件或属性？
回答 4
Stack Overflow用户
发布于 2016-11-30 06:50:27
为什么不尝试以下操作：
1)查找相对于视口的元素位置：
rect=elt.getBoundingClientRect();
x=rect.left;
y=rect.top;(也可以认为是中点坐标)
2)在x，y位置找到顶部元素：
topElt=document.elementFromPoint(x,y);3)检查顶部元素是否与原始元素相同：
if(elt.isSameNode(topElt)) console.log('no overlapping');Stack Overflow用户
发布于 2015-09-22 17:54:19
你在找这样的东西吗？
http://jsfiddle.net/6v89b1fy/4/
var coverElem = $(".cover");
var elemArray = [];
elemArray.push($(".ele1"), $(".ele2"), $(".ele3"));
for(i=0; i< elemArray.length; i++)
{
var currElemOffset = elemArray[i].offset();
var currElemWidth = elemArray[i].width();
var currElemStPoint = currElemOffset.left ;
var currElemEndPoint = currElemStPoint + currElemWidth;
if(currElemStPoint <= coverElem.offset().left && coverElem.offset().left <= currElemEndPoint)
{
elemArray[i].append("<span>Covered</span>");
}
else
{
elemArray[i].append("<span>Not covered</span>");
}
}Stack Overflow用户
发布于 2015-09-22 19:08:53
这里有一个快速的例子来说明你是如何去做的。这将检查垂直和水平重叠的。这是一种通用的，也不是那么通用的，因为这是基于您问题中的HTML。调整.cover的顶部/左侧值，以查看它是否适用于所有可能的情况。
var $cover = $(".cover"),
cWidth = $cover.width(),
cHeight = $cover.height(),
cLeft = $cover.offset().left,
cRight = $(window).width() - (cLeft + cWidth),
cTop = $cover.offset().top,
cBtm = $(window).height() - (cTop + cHeight);
$("div:not(.cover)").each(function() {
var $this = $(this),
eleWidth = $this.width(),
eleHeight = $this.height(),
eleLeft = $this.offset().left,
eleTop = $this.offset().top,
eleRight = $(window).width() - (eleLeft + eleWidth),
eleBtm = $(window).height() - (eleTop + eleHeight);
if (
cLeft < (eleLeft + eleWidth) &&
cRight < (eleRight + eleWidth) &&
cTop < (eleTop + eleHeight) &&
cBtm < (eleBtm + eleHeight)
) {
alert($this.text() + " is covered by " + $cover.text());
}
});.ele {
display: inline-block;
width: 100px;
height: 100px;
position: relative;
margin-top: 40px;
}
p {
width: 100%;
text-align: center;
}
.ele1 {
background-color: red;
}
.ele2 {
background-color: blue;
}
.ele3 {
background-color: green;
}
.cover {
position: absolute;
width: 100px;
height: 100px;
left: 60px;
top: 110px;
background: grey;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ele ele1">
<p>A</p>
</div>
<div class="ele ele2">
<p>B</p>
</div>
<div class="ele ele3">
<p>C</p>
</div>
<div class="ele ele3">
<p>D</p>
</div>
<div class="ele ele3">
<p>E</p>
</div>
<div class="ele ele3">
<p>F</p>
</div>
<div class="ele ele3">
<p>G</p>
</div>
<div class="cover">
<p>COVER</p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32713250
复制相关文章
相似问题
腾讯云开发者
