Javascript 检查onload以查看元素是否可见，如果不可见，则显示另一个元素

我正在设置一些jQuery来检查热点是否在屏幕上可见，以确定帮助消息是否显示在屏幕上。如果热点可见，则根本不应显示帮助消息

到目前为止，我有一些脚本可以关闭帮助消息，如果你在帮助消息淡入后悬停在热点上。但是，我不确定如何在帮助消息消失之前检查热点是否已悬停

此功能的主要原因是两条消息在页面上位于同一位置，此时会产生堆叠效果

请在下面找到我的脚本和一个关于这个问题的例子。 如果您将鼠标悬停在热点上，然后在光标仍在热点上的情况下刷新窗口，您应该会看到我的问题

$（文档）.ready（函数（）{
$（'.ws hotspot'）.hover（函数（）{
控制台日志（“出现”）；
$（'ws hotspot helper'）.css（'display'，'none'）；
$（this.find（“.ws热点视图更多”）.animate（{opacity:0.8，marginLeft:“26px”}，200）；
}，函数（）{
$（'ws hotspot helper'）.css（'display'，'none'）；
$（this.find（“.ws hotspot view more”）.stop（）.animate（{opacity:0，marginLeft:“22px”}，50）；
});
函数hospothelper（）{
if（！$（'#ws hotspot one.ws hotspot view more'）.css（'opacity'）==0.8）{
控制台日志（“出现”）；
$（'ws hotspot helper'）.css（'display'，'none'）；
}
否则{
$（'ws hotspot helper'）.delay（1000）.fadeIn（1000）.delay（5000）.fadeOut（1000）；
};
};
$（温泉浴场）；
});
.ws热点{
z指数：9999；
位置：绝对位置；
背景：蓝色；
宽度：55px；
高度：55px；
}
#ws-hotspot助手{
背景：黄色；
背景重复：无重复；
背景位置：1px-22px；
显示：无；
最小宽度：130px；
填充：0.37雷姆；
左：1rem；
位置：绝对位置；
顶部：钙（16%+9px）；
左：计算（58%+27px）；
边界半径：3px 10px 10px 3px；
边框：1px实心#C5C5；
边框宽度：1px 1px 1px 0px；
字体大小：0.95rem；
颜色：#58595b；
}
#ws-hotspot辅助对象跨度#ws-hotspot辅助对象箭头{
左边距：10px；
右边距：3倍；
字体大小：400；
字号：1rem；
}
.ws热点.ws热点查看更多信息{
显示：内联块；
不透明度：0；
背景：黄色；
背景重复：无重复；
背景位置：2px-22px；
左边距：24px；
边缘顶部：9px；
最小宽度：80px；
填充：7px；
左侧填充：25px；
字体大小：0.87rem；
边界半径：3px 10px 10px 3px；
边框：1px实心#C5C5；
边框宽度：1px 1px 1px 0px；
颜色：#58595b；
文本对齐：居中；
}
.ws热点#ws热点1{
最高：16%；
左：58%；
}
#红盒子{
位置：相对位置；
背景：红色；
宽度：100%；
身高：100%；
}

◀ 了解更多
因此，我发现在.delay（）之后，.fadeIn（）仍会在ws-hotspot helper元素上运行，尽管if语句将其设置为“无”。因此，我关掉了电话线：

$（'ws hotspot helper'）.css（'display'，'none'）

为了

$（'#ws hotspot helper'）。删除（）

这立即解决了问题，因为它只是将其从“查看更多”元素悬停的页面中取出

希望我通过回答这个问题来帮助别人