迹忆客 专注技术分享

要在 React 中添加一个 hover 类，需要以下几个步骤：

• 在元素上设置 onMouseOver 和 onMouseOut 属性。
• 跟踪用户是否将鼠标悬停在状态变量中的元素上。
• 根据状态变量有条件地添加类。

import './App.css';

import {useState} from 'react';

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

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

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

  return (
    <div>
      <div>
        <div
          className={isHovering ? 'bg-salmon' : ''}
          onMouseOver={handleMouseOver}
          onMouseOut={handleMouseOut}
        >
          Hover me
        </div>
      </div>
    </div>
  );
};

export default App;

这是示例的 App.css 文件。

.bg-salmon {
  background-color: salmon;
  color: white;
}

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

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

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

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

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

我们使用三元运算符有条件地将类添加到元素中。

<div
  className={isHovering ? 'bg-salmon' : ''}
  onMouseOver={handleMouseOver}
  onMouseOut={handleMouseOut}
>
  Hover me
</div>

三元运算符与 if/else 语句非常相似。

它检查问号左边的值是否为真，如果是，则运算符返回冒号左边的值，否则返回右边的值。

换句话说，如果 isHovering 变量存储了一个真值，我们将 bg-salmon 类添加到元素中，否则返回一个空字符串。

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

• 调用 handleMouseOver 函数。
• isHovering 状态变量设置为 true。
• 类被添加到元素中。

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

• 调用 handleMouseOut 函数。
• isHovering 状态变量设置为 false。
• 该类不会添加到元素中。