React 中的悬停样式

  2. 贴士文章
  3. React 指南
  4. React 中的悬停样式
Rana Hasnain Khan 2024年2月15日
React React Hover
React 中的悬停样式

我们将介绍多种在 React 中设置悬停效果样式的方法。

在 React 中使用悬停效果并为悬停效果设置样式

悬停效果是改进我们的 Web 应用程序并使它们对用户友好的好方法。这些视觉效果很棒，有助于让用户满意。

我们还可以在我们的 React 应用程序中使用悬停效果，通过简单的步骤使它们变得用户友好和有趣。让我们从一个示例开始，了解如何使用悬停效果并为悬停效果设置样式。

让我们使用以下命令创建一个新应用程序。

# react
npx create-react-app my-app

在 React 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。

# react
cd my-app

现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。

# react
npm start

我们必须安装一些库来帮助我们在应用程序中实现悬停效果。

我们将运行以下命令来安装 react-hook 以进行悬停。

# react
npm i @react-hook/hover

我们将运行以下命令来安装 dash-ui/styles。

# react
npm i @dash-ui/styles

一旦我们安装了我们的库，我们需要在 App.js 文件中导入 useHover 和 styles。

# react
import useHover from "@react-hook/hover";
import { styles } from "@dash-ui/styles";

现在，我们将在 export default function App() 中定义 Hovertarget 和 Hovered 元素。我们将返回一个 div，一旦它被悬停，它就会改变它的类名，并且有一个 Hovertarget 的 ref，如果有人悬停在它上面，它将输出悬停样式，如果没有人悬停在它上面，它将输出默认样式.

# react
export default function App() {
  const Hovertarget = React.useRef(null);
  const Hovered = useHover(Hovertarget);
  return (
    <div className={hoverStyle({ Hovered })} ref={Hovertarget}>
      {Hovered ? "Hovered Style" : "Default Style"}
    </div>
  );
}

现在，我们将为 Hovered 和 default 类定义我们的 CSS 样式。所以我们在 App.js 中的代码将如下所示。

# react
import React from "react";
import useHover from "@react-hook/hover";
import { styles } from "@dash-ui/styles";

export default function App() {
  const Hovertarget = React.useRef(null);
  const Hovered = useHover(Hovertarget);
  return (
    <div className={hoverStyle({ Hovered })} ref={Hovertarget}>
      {Hovered ? "Hovered Style" : "Default Style"}
    </div>
  );
}

const hoverStyle = styles({
  default: `
    background-color: lightblue;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  `,
  Hovered: `
    background-color: lightgreen;
    color: white;
  `
});

输出：

在 React 中悬停样式

现在，尝试使用 style.css 而不是 Instyle elements 来设置我们的悬停效果。首先，我们将创建一个名为 New.js 的新文件，在其中，我们将返回一个带有 New 类的 div。我们还将在这个新文件中导入 style.css。所以我们的代码如下所示。

# react
import "./styles.css"

export default function New() {
  return <div className="New">CSS Style</div>;
}

现在我们将在 index.js 中导入这个新文件以显示在 React 的主页上，并在 App 组件之后显示 New 组件。我们的代码如下所示。

# react
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import New from "./New.js";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
    <New />
  </StrictMode>,
  rootElement
);

现在，让我们使用 CSS 设置新的 div 和悬停效果。

# react
.New{
  background-color: lightgreen;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.New:hover{
  background-color: lightblue;
    color: white;
}

输出：

使用样式 css React 样式悬停效果

悬停输出：

React 第二个示例中的悬停样式

作者： Rana Hasnain Khan
Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn