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;
`
});
输出:
现在,尝试使用 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;
}
输出:
悬停输出:
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