我對 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 關注
- 198 瀏覽
添加回答
舉報
0/150
提交
取消