在 React 中添加一个 hover 类

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

在 React 中添加一个 hover 类

我们在 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
  • 该类不会添加到元素中。
免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 在 React 中添加一个 hover 类