React 中的懸停樣式

Rana Hasnain Khan 2022年5月18日

React React Hover

我們將介紹多種在 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 第二個示例中的懸停樣式

Author: Rana Hasnain Khan

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.