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

Question

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

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

我目前正在努力使页脚 ishover 事件正常工作，同时它后面的内容仍然可以点击。出现问题是因为如果页脚有 pointerEvent: "none" 悬停事件不起作用，如果页脚没有 pointerEvent: "none" 那么它后面的按钮不可点击...

我创建了一个最小的 codesandbox 来重现问题。

提前致谢:)

Answer 1

太棒了，我是这样做的：

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>
 );
 }

并且在 styles.css 我做了那些 classes:

* {
   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;
  }

所以现在当你像我所说的那样将鼠标悬停在页脚上时（我无法忍受那些“asasas”的东西 xD）class footer__hover 被应用并且它的位置改变到右侧并且当您移出鼠标时，只会应用具有基本样式的 class 页脚，因此它会返回到 left: 0 位置并覆盖按钮 :D

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

How to capture onhover of a element overlapping a button?

javascript

css

hover

reactjs