在 React 中显示悬停元素

要在 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;

在 React 中显示悬停元素

我们在 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 元素不再显示。