在 React 应用中创建悬停按钮
介绍
本指南将讨论在 React 应用中创建悬停按钮的分步过程。我们将看到创建悬停按钮的两种方法：使用纯 CSS 和在 React 应用中使用鼠标事件。我们还将讨论悬停按钮的不同效果，例如增大、缩小、更改颜色等。
使用悬停选择器
在本部分中，您将使用纯 CSS 和:hover选择器创建一个具有悬停效果的按钮。当悬停选择器与元素一起使用时，当您将鼠标悬停在该元素上时，该元素将被选中。
此示例有一个带有className="example"和蓝色背景的div ：
import React from "react";
import "./style.css";
export default function App() {
return (
<div className="example">
</div>
);
}
以下是这个div的 CSS ：
.example {
background: blue;
width: 400px;
height: 400px;
margin: 0 auto;
}
这个div 的外观如下：
如果您向此div添加:hover选择器，那么只要您将鼠标悬停在该div上， :hover内的 CSS就会生效。
.example:hover {
background: black;
}
在这种情况下，只要将鼠标移到.example:hover{}上，它里面的background属性就会覆盖.example下的背景属性。
您可以在Stackbitz上探索这个示例。
创建按钮
在你的App.js文件中创建一个带有className="click"的简单按钮，如下所示：
import React from "react";
import './App.css'
function App() {
return (
<div className="App">
<button className="click">Click Me!</button>
</div>
);
}
export default App;
这是您的按钮的默认外观，没有任何自定义样式。
通过在App.css文件中添加以下代码来设置此按钮的样式。
html {
background: #b19cd9;
}
.App {
display: flex;
}
.click {
width: 300px;
background: white;
font-size: 40px;
margin: 100px auto;
padding: 10px;
cursor: pointer;
}
上述 CSS 代码将改变应用程序的背景颜色并将按钮样式设置为如下所示。
现在您将添加将鼠标悬停在按钮上时看到的效果。
- 不透明度
不透明度是指元素的透明度。将以下代码添加到App.css以实现不透明度悬停效果。
.click:hover {
opacity: 0.3;
}
您可以将鼠标悬停在按钮上来查看上述代码的运行情况。
- 颜色变化
如上面的示例所讨论的，您可以使用这样的悬停选择器来更改按钮的颜色。
.click:hover {
background: palegreen;
}
以下是上述代码的实际运行情况。
- 增大/缩小您可以使用 CSS 中的scale()
函数 增大或缩小元素。您可以在此处阅读更多相关信息。
要创建增长悬停效果，请将scale()添加到transform属性。scale ()中的数字表示缩放矢量。
.click:hover {
transform: scale(2); /* Equal to scaleX(2) scaleY(2) */
}
它看起来是这样的。
如上所示，转换是瞬时的，看起来不太对劲。您可以使用transition-duration属性添加延迟来解决这个问题。
.click:hover {
transform: scale(2);
transition-duration: 0.5s;
}
您可以在此处看到转换的延迟。
使用相同的scale()函数，您还可以缩小元素。要缩小元素，您必须在scale()中指定一个小于 1 的数字，如下所示。
.click:hover {
transform: scale(0.6);
transition-duration: 0.5s;
}
该效果看起来如下。
您可以在此处探索此示例。
使用鼠标事件
在本节中，您将使用 React 中的鼠标事件创建具有悬停效果的按钮。根据应用程序要求，您可以使用不同的鼠标事件，例如onClick、onContextMenu、onDoubleClick、onDrag、onDragEnd等。您可以在此处查看完整列表。
对于悬停效果，您将使用onMouseEnter和onMouseLeave事件。顾名思义，当鼠标进入元素时会触发onMouseEnter ，而当鼠标离开元素时会触发onMouseLeave 。通过示例可以更清楚地了解这一点。
例子
考虑一个与上例中讨论的蓝色div相同的div 。以下是具有内联样式的蓝色div的代码：<a href="https://translate.google.com/website?sl=en&tl=zh-CN&hl=zh-CN&client=webapp&u=https://zhenyo
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~