在代碼中，有兩個鏈接，我想為這兩個鏈接實作不同的懸停效果（即，如果我將滑鼠懸停在I want to buy鏈接上應該變成red，如果我懸停在鏈接上I want to sell它應該變成blue）。請指導我如何實作它
這是代碼的一部分：
<ul>
<li><Link to='/buyer'>I want to buy</Link></li>
<li><Link to='/seller'>I want to sell</Link></li>
</ul>
如果我使用了錨標簽，我可以使用，a: hover但在上述情況下無法找到該怎么做。
uj5u.com熱心網友回復：
為<li>標簽定義類名，然后通過使用 CSS后代選擇器（一個空格），您可以到達<a>標簽：
.classNameOfLiTag a:hover {
// styling
}
后代選擇器可以選擇任何包裹在其下的后代元素，<li>無論多深。更準確地說，您可以使用子選擇器 (>) 只選擇<a>直接作為子代的標簽，<li>如下所示：
.classNameOfLiTag > a:hover {
// styling
}
uj5u.com熱心網友回復：
在你的 js 檔案中：
<ul>
<li><Link to='/buyer' className={class1}>I want to buy</Link></li>
<li><Link to='/seller' className={class2}>I want to sell</Link></li>
</ul>
在你的 css 中：
.class1:hover {
color: red;
}
.class2:hover {
color: blue;
}
uj5u.com熱心網友回復：
你可以給 li 添加不同的類，然后給它懸停樣式
<ul>
<li className="link1"><Link to='/buyer'>I want to buy</Link></li>
<li className="link2"><Link to='/seller'>I want to sell</Link></li>
</ul>
CSS
.link1:hover{
// your style
}
.link1:hover{
// your style
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/352872.html
上一篇：TypeScript錯誤：型別'type'不可分配給型別'IntrinsicAttributes&'type'&{children?:ReactNod