如何在 React 中设置悬停样式

由柏拉图重新发布

关注： 0

介绍

使用视觉效果是保持界面交互和吸引用户注意力的绝佳方式。在我们的屏幕上设置动画对象可以创造独特的体验并增加交互性。

在本文中，我们将学习如何使用 CSS 在 React 中设置悬停样式，以及如何进行内联悬停样式。

Hover 是一个伪类，它只允许我们添加特定样式以使用户知道他们的鼠标何时打开和关闭特定元素。对于本文，我们将使用一个框：

const App = () => {
   return (
      <div>
         <div className="box">
            <p>Hover me!</p>
         </div>
      </div>
   );
};

它具有以下基本样式：

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

本质上，我们将背景颜色更改为 lightblue 当鼠标悬停在盒子上时，然后在鼠标移开时将其恢复为默认样式。

如何在 React 中设置悬停样式

有两种方法：外部和内联。外部涉及拥有一个单独的 CSS 文件，可以轻松地为悬停设置样式，而内联样式不允许我们使用伪类设置样式，但我们将在本文中学习如何使用鼠标事件在内联 CSS 中设置悬停样式。

如何使用 CSS 外部样式在 React 中设置悬停样式

这与 HTML 和 CSS 的工作方式非常相似；我们所要做的就是给元素一个 className （不是 class) 或使用标签作为我们要定位的选择器，然后设置悬停伪类的样式：

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

.box:hover {
   background-color: lightblue;
}

我们所做的只是添加 :hover 伪类到以前样式的选择器，并更改我们想要在鼠标悬停在元素上时更改的任何属性。

如何在 React 中使用内联样式设置悬停样式

通过内联样式，我们的意思是通过元素的标签进行样式设置，这是通过 style 属性。如果我们想将前面的代码转换为内联样式：

const App = () => {
   return (
      <div>
         <div
            style={{
               height: '200px',
               width: '200px',
               backgroundColor: 'rgb(0, 191, 255)',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
               fontSize: '30px',
               cursor: 'pointer',
            }}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

在我们的应用程序中重复这样的样式可能会使其难以阅读，因此如果我们只在页面上设置单个对象的样式，我们可以创建一个样式对象，并且不需要为它创建文件：

const App = () => {

const boxStyle = {
   height: '200px',
   width: '200px',
   backgroundColor: 'rgb(0, 191, 255)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: '30px',
   cursor: 'pointer',
};

   return (
      <div>
         <div style={boxStyle}>
            <p>Hover me!</p>
         </div>
      </div>
   );
};

到目前为止，我们已经构建了我们的盒子。为了在 React 中使用内联 CSS 设置悬停样式，我们使用状态有条件地设置内联样式，以及 onMouseEnter 和 onMouseLeave props 告诉我们鼠标何时在元素上，何时不在：

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };
   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      <!-- ... -->
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

此时，我们可以使用 *isHover* 状态：

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};

到目前为止，我们已经看到了如何实现它。现在，让我们分解我们的代码并解释为什么我们使用我们所做的语法。我们首先创建一个状态，该状态存储一个布尔值，指示何时发生悬停（true) 否则（默认设置为 false):

const [isHover, setIsHover] = useState(false);

然后我们还在 div 中添加了两个事件来帮助改变我们的状态并知道鼠标何时在盒子上以及何时离开盒子：

<div
   style={boxStyle}
   onMouseEnter={handleMouseEnter}
   onMouseLeave={handleMouseLeave}
>
   <p>Hover me!</p>
</div>

onMouseEnter 当鼠标进入元素时触发事件，而 onMouseLeave 离开时触发事件。我们为每个事件分配了一个函数，现在我们用它来改变状态：

const handleMouseEnter = () => {
   setIsHover(true);
};

const handleMouseLeave = () => {
   setIsHover(false);
};

查看我们的 Git 学习实践指南，其中包含最佳实践、行业认可的标准以及随附的备忘单。停止谷歌搜索 Git 命令，实际上学习它！

我们设置 state 在基于触发事件的每个函数中。最后，我们可以使用状态来有条件地设置盒子的样式，而不仅仅是为了 backgroundColor，但也适用于任何其他风格：

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
   color: isHover ? 'red' : 'green',
};

当我们把所有这些放在一起时，我们现在可以使用内联样式在 React 中设置悬停样式：

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };

   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      height: '200px',
      width: '200px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '30px',
      cursor: 'pointer',
      backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
      color: isHover ? 'red' : 'green',
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

export default App;