我对 React 还很陌生，无法解决这个问题。基本上，我只想在悬停按钮时更改“FontAwesomIcon”标签的颜色，而不是“span”标签内文本的颜色。我也在使用react-bootstrap。这是我的代码，<div class="tab"> <Link to="/dataset-upload"> <button class="tablinks" onClick={this.handleClick}> <FontAwesomeIcon icon={faCloudUploadAlt} size="lg"/> <span>Dataset Upload</span> </button> </Link></div>这是 FontAwesomeIcon 的 CSS，.tab button FontAwesomeIcon:hover{ color: #86BC25;}如果我在 CSS 中将 FontAwesomeIcon 替换为 span ，它就可以工作。我将不胜感激任何建议或建议。
4 回答
MMMHUHU
TA贡献1834条经验 获得超8个赞
className您可以在组件上使用该属性FontAwesomeIcon。
所以只要写一个css规则：
.tablinks:hover .fa-icon {
color: red;
}然后将此类赋予组件：
<FontAwesomeIcon icon={faCloudUploadAlt} size="lg" className="fa-icon" />
FFIVE
TA贡献1797条经验 获得超6个赞
由于 CSS 可以做很多事情，所以我不会加倍。
但是，如果你想编写纯 JSX 而不styled-components使用其他东西。
您可以完全控制按钮 mouseOver 事件：
import React, { useState } from "react";
import "./styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCloudUploadAlt } from "@fortawesome/free-solid-svg-icons";
export default function App() {
const [over, setOver] = useState(false);
return (
<div className="App">
<button
onMouseOver={() => setOver(true)}
onMouseLeave={() => setOver(false)}
>
<FontAwesomeIcon
icon={faCloudUploadAlt}
size="lg"
style={over ? { color: "red" } : {}}
/>
<span>Dataset Upload</span>
</button>
</div>
);
}
临摹微笑
TA贡献1982条经验 获得超2个赞
使用CSS你可以达到这样的结果，
HTML：向父 div添加classNamesay like并对.upload-iconclassNamefont-uploadFontAwesomeIcon
<div className="tab upload-icon">
<Link to="/dataset-upload">
<button className="tablinks" onClick={this.handleClick}>
<FontAwesomeIcon
icon={faCloudUploadAlt}
size="lg"
className="font-upload"
/>
<span>Dataset Upload</span>
</button>
</Link>
</div>
CSS：将鼠标悬停在父 div 上时upload-icon，更改font-upload类似的颜色，
.upload-icon:hover .font-upload {
color: green;
}
注意：请考虑使用className而不是class..
波斯汪
TA贡献1811条经验 获得超4个赞
//as component, take value as prop, if we pass color as prop, then its value will be immutable
<FaTimesCircle className="fa-icon" />
//css file
.fa-icon{color: blueviolet;}
.fa-icon:hover {color: rgb(255, 72, 72);}
- 4 回答
- 0 关注
- 103 浏览
添加回答
举报
0/150
提交
取消