Javascript 如何捕获与按钮重叠的元素的悬停？

我正在使用react并尝试创建一个footer元素，它在屏幕的一侧显示一些信息。 当页脚悬停时，我希望它移动到屏幕的另一侧，以便后面的内容可见

chrome的加载页脚就是一个很好的例子。当您将鼠标移到它上面时，它会移到右侧（当您移出鼠标时，它会再次回到左侧）

我目前正在努力使它的页脚ishover事件工作，同时它背后的内容仍然是可点击的。出现此问题的原因是，如果页脚没有

pointerEvent:“无”

悬停事件不起作用，如果页脚没有

pointerEvent:“无”

则其后面的按钮不可单击

我创建了一个极小值来重新创建问题

---

事先非常感谢：）

所以，我是这样做的：

import React, { useState } from "react";

export default function App() {
onst [isMaskHoverd, setIsMaskHoverd] = useState(false);

return (
<div className="App">
  <div
    onMouseOver={() => setIsMaskHoverd(true)}
    onMouseOut={() => setIsMaskHoverd(false)}
    className={isMaskHoverd ? "footer footer__hover" : "footer"}
  >
    Footer
  </div>
  {/* It is clickable now :) */}
  <button className="btn" onClick={() => alert("clicked!")}>
    Click me
  </button>
  <p className="">masked hovered: {isMaskHoverd ? "true" : "false"} </p>
 </div>
 );
 }

---

所以现在当你把鼠标放在我所说的页脚上时（我受不了那些“asasas”的东西xD）使用class

footer\uuu悬停

并将其位置更改为右侧，当您移出鼠标时，仅应用带有基本样式的class footer，因此它将返回到

左侧：0

位置并覆盖codesandbox中的按钮：D

，按钮是否应位于移动div下？悬停后按钮会显示吗？或者按钮应该在移动div内？是的，应该在下方。页脚总是显示在页面中，按钮是页面的“内容”。您是否尝试运行该按钮，因为我很确定您将得到的只是页脚来回闪烁。因为当它移动ishover=false时，它会向后移动，然后重复…是的，我做了，你在问题中说，你希望它在你不再悬停在它上面时返回，就像示例中的chrome加载条一样，所以它是这样工作的。经过一些测试，我得到了你的解决方案。有一个非常奇怪的问题，如果开发工具打开，页脚会来回闪烁。真奇怪。无论如何，谢谢你！嗯，也许这是因为开发工具使用不合适的页面高度和位置来进行smth，但我很高兴它总体上是有效的：D

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
 background-color: black;
}

.App {
 position: relative;
 height: 100vh;
 }

.btn {
   position: absolute;
   bottom: 0;
   padding: 20px;
 }

 .footer {
   background-color: white;
   padding: 20px;
   text-align: center;
   width: 50%;
   position: absolute;
   bottom: 0;
   z-index: 2;
  }

 .footer__hover {
   right: 0;
  }