如何为代码中显示的链接实现不同的悬停效果

Question

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

Answer 1

为<li>标记定义类名，然后使用CSS Descendant Selector(空白(，可以访问<a>标记：

.classNameOfLiTag a:hover {
// styling
}

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

.classNameOfLiTag > a:hover {
// styling
}

Answer 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;
}

Answer 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
}