懸停文本時如何在文本裝飾中添加下劃線？似乎這是正確的，但它仍然不起作用
點擊這里
<span
style={{
color: "red",
cursor: "pointer",
"& :hover": {
textDecoration: "underline"
}
}}
>
Click this.
</span>
uj5u.com熱心網友回復：
根據這里：
已經有很多有效的觀點表明反應行內樣式不是一個好主意。不支持 CSS 選擇器，例如“:hover”、“:active”、“:focus”、“:before”和“:after”、媒體查詢，也不支持 SCSS 語法等等。
只需使用一個css檔案并在那里實作它class:hover
uj5u.com熱心網友回復：
該style屬性不支持選擇器。
您需要將邏輯移動到<style>元素或<link>ed 樣式表中。
有很多對 React 友好的庫可以為您即時生成它們。Styled Components是一個流行的工具，它支持你正在使用的 SCSS 語法（幾乎——你在 . 之后有一個流氓空格&）使用。
import { styled } from 'styled-components';
const MySpan = styled.span`
color: red;
cursor: pointer;
&:hover {
text-decoration: underline;
}
`;
進而
<MySpan>Click this.</MySpan>
然而，span 元素并不是為互動而設計的。螢屏閱讀器不會將它們宣布為可點擊，如果您不使用滑鼠，則無法使用標簽。這是一個主要的可訪問性障礙。如果您希望用戶單擊某些內容，請使用鏈接（如果您正在鏈接某處）或按鈕（否則）。
uj5u.com熱心網友回復：
試試這個，我試過了，它有效。
應用程式.js：
import "./styles.css";
export default function App() {
return (
<div className="App">
<span
style={{
color: "red",
cursor: "pointer"
}}
>
Click this.
</span>
</div>
);
}
樣式.css：
.App {
font-family: sans-serif;
text-align: center;
}
span:hover {
text-decoration: underline !important;
color: "red";
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459640.html
上一篇：如何使影像標簽下方的文本居中？