如代码所示，如何为链接实现不同的悬停效果？答案

【问题标题】：How to implement different hover effect for the links as shown in the code?如代码所示，如何为链接实现不同的悬停效果？
【发布时间】：2021-12-21 09:21:50
【问题描述】：

在代码中，有两个链接，我想为这两个链接实现不同的悬停效果（即，如果我将鼠标悬停在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，但在上述情况下无法找到该怎么做。

【问题讨论】：

标签： css reactjs react-router-dom

【解决方案1】：

给<li>标签定义类名，然后使用CSS Descendant Selector（一个空格），就可以到达<a>标签：

.classNameOfLiTag a:hover {
  // styling
}

后代选择器可以选择包裹在<li> 下的任何后代元素，无论其深度如何。更准确地说，您可以使用子选择器 (>)，它只选择直接是 <li> 子代的 <a> 标记，如下所示：

.classNameOfLiTag > a:hover {
  // styling
}

【讨论】：

【解决方案2】：

在你的 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;
}

【讨论】：

【解决方案3】：

你可以给 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
}

【讨论】：