如何在React中设计悬停的样式（附实例）

后端之巅
482 阅读4分钟

简介

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

在这篇文章中，我们将学习如何在React中使用CSS样式化悬停，以及如何进行内联悬停样式化。

悬停是一个伪类，它简单地允许我们添加特定的样式，使用户意识到他们的鼠标是在一个特定的元素上和离开。在这篇文章中，我们将使用一个方框：

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进行悬停样式设计。

如何在React中用CSS外部样式设计悬停的样式

这与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 道具有条件地设置内联样式，这些道具告诉我们鼠标何时在元素上，何时不在：

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);
};

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

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

当我们把所有这些放在一起时，我们现在就可以在React中用Inline风格来设计悬停：

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;

结论

在这篇文章中，我们学习了如何在React中使用外部样式和内联样式来设计hover。虽然不推荐使用内联样式，但了解它的工作原理还是很有用的，以防我们被提示使用它。

avatar
文章
阅读
粉丝