javascript - Css/JS 在碰撞时隐藏元素

Question

我在客户页面底部使用了一张图片。它是屏幕左下角的 absolute 定位图像，位于页脚 div 内。

.footer__endrow > .chefBottom {
    left: 0;
    position: absolute;
    bottom: 0;
}

这在桌面上以正常分辨率显示时效果很好。然而，当窗口变小时，它开始与那里的社交图标发生碰撞并移到它们后面。

当查看第二张图片时，它本身的视口(viewport)仍然在普通桌面网站的范围内，所以当它处于平板电脑或移动设备大小时我不能只隐藏它，因为碰撞已经发生了。

当图像与另一个元素碰撞时，有没有办法用 javascript 或 css 隐藏图像？例如检测元素是否接触到另一个元素然后隐藏它？

Answer 1

只需在响应模式下使用 chrome 开发人员工具 inspect element 找到图像与社交图标碰撞的断点，然后使用媒体查询将元素隐藏在 css 文件的末尾，例如

@media screen and (max-width:480px){
  .footer__endrow > .chefBottom{
    display:none;
  }
}

注意:这里我使用了480px作为断点