CODEWITHSUNDEEP
htmlcss
Joper
Joper

Reputation: 8209

How to remove underline from a name on hover

I have such html:

<legend class="green-color"><a name="section1">Section</a></legend>

legend.green-color{
    color:green;
}

In my case Section looking green, but when i put mouse pointer on it it became looking like an a href, but i want it stay just the same without underline and changing color.

Is it possible to achieve without changing css or with minimum css change?

or may be somehow with jquery?

Upvotes: 151

Views: 269067

Answers (7)

Zohab Ali
Zohab Ali

Reputation: 9574

In react you need to do this

<Link to="/" style={{ textDecoration: 'none' }}>
....
</Link>

or if you are using bootstrap in react then use this class

className="text-decoration-none"

Upvotes: 1

BaiJiFeiLong
BaiJiFeiLong

Reputation: 4615

legend.green-color{
    color:green !important;
}

Upvotes: 3

Wachaga Mwaura
Wachaga Mwaura

Reputation: 3600

You can assign an id to the specific link and add CSS. See the steps below:

1.Add an id of your choice (must be a unique name; can only start with text, not a number):

<a href="/abc/xyz" id="smallLinkButton">def</a>

  1. Then add the necessary CSS as follows:

    #smallLinkButton:hover,active,visited{

      text-decoration: none;
      }

Upvotes: 4

Adithya Surampudi
Adithya Surampudi

Reputation: 4454

Remove the text decoration for the anchor tag

<a name="Section 1" style="text-decoration : none">Section</a>

Upvotes: 25

Small Hadron Collider
Small Hadron Collider

Reputation: 809

You can use CSS under legend.green-color a:hover to do it.

legend.green-color a:hover {
    color:green;
    text-decoration:none;
}

Upvotes: 7

Chris
Chris

Reputation: 3795

To keep the color and prevent an underline on the link:

legend.green-color a{
    color:green;
    text-decoration: none;
}

Upvotes: 6

Harry Joy
Harry Joy

Reputation: 59660

try this:

legend.green-color a:hover{
    text-decoration: none;
}

Upvotes: 268

Related Questions