How to implement different hover effect for the links as shown in the code?-CodePudding

In the code, there are two links and I want to implement different hover effects for both the links (i.e if I hover over I want to buy the link should become red and if I hover over the link I want to sell It should become blue). Please guide me on how I could achieve it

Here is the part of the code:

<ul>
   <li><Link to='/buyer'>I want to buy</Link></li>
   <li><Link to='/seller'>I want to sell</Link></li>
</ul>

In case if I used an anchor tag I could have used a: hover but was unable to find what to do in the above case.

CodePudding user response：

Define class name to the <li> tag, then by using CSS Descendant Selector (a whitespace), you can reach the <a> tag:

.classNameOfLiTag a:hover {
  // styling
}

Descendant selector can select any descendant elements wrapped under <li> regardless how deep. To be more precise, you can use child selector (>) that selects only <a> tag that is directly the children of <li> like so:

.classNameOfLiTag > a:hover {
  // styling
}

CodePudding user response：

In your js file:

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

In your css:

.class1:hover {
       color: red;
}

.class2:hover {
       color: blue;
}

CodePudding user response：

You can add different class to li and then give it hover styles

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