迹忆客 专注技术分享

要在 React 中显示悬停元素：

1. 在元素上设置 onMouseOver 和 onMouseOut 属性。
2. 跟踪用户是否将鼠标悬停在状态变量中的元素上。
3. 根据状态变量有条件地渲染其他元素。

import {useState} from 'react';

const App = () => {
  const [isHovering, setIsHovering] = useState(false);

  const handleMouseOver = () => {
    setIsHovering(true);
  };

  const handleMouseOut = () => {
    setIsHovering(false);
  };

  return (
    <div>
      <div>
        <div onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
          Hover over me
        </div>

        {isHovering && (
          <div>
            <h2>Only visible when hovering div</h2>
          </div>
        )}
      </div>
    </div>
  );
};

export default App;

我们在 div 元素上设置了 onMouseOver 属性，因此每次用户将鼠标悬停在该元素上时，都会调用 handleMouseOver 函数。

当用户将光标移动到元素或其子元素之一上时，将触发 mouseover 事件。

在我们的 handleMouseOver 函数中，我们简单地将 isHovering 状态变量设置为 true。

相反，在我们的 handleMouseOut 函数中，我们将 state 变量设置为 false。

当用户的光标不再包含在元素或其子元素之一中时，将触发 mouseout 事件。

我们使用逻辑 AND (&&) 运算符有条件地呈现另一个 div 元素。

逻辑与 (&&) 运算符如果为假则返回左边的值，否则返回右边的值。

如果状态变量存储了一个 false 值，则逻辑 AND (&&) 运算符将返回 false，并且不会呈现任何内容。

布尔值、null 和 undefined 将被忽略。 他们根本不渲染。

当用户将鼠标悬停在 div 元素上时：

1. 调用 handleMouseOver 函数。
2. isHovering 状态变量设置为 true。
3. 另一个 div 元素被渲染。

相反，当用户将光标移出 div 元素时：

1. 调用 handleMouseOut 函数。
2. isHovering 状态变量设置为 false。
3. 另一个 div 元素不再显示。