How to remove underline from a name on hover

HtmlCss

Html Problem Overview


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

or may be somehow with jquery?

Html Solutions


Solution 1 - Html

try this:

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

Solution 2 - Html

Remove the text decoration for the anchor tag

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

Solution 3 - Html

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

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

Solution 4 - Html

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

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

Solution 5 - Html

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>

2. Then add the necessary CSS as follows:

    #smallLinkButton:hover,active,visited{

          text-decoration: none;
          }

Solution 6 - Html

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

Solution 7 - Html

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"

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJoperView Question on Stackoverflow
Solution 1 - HtmlHarry JoyView Answer on Stackoverflow
Solution 2 - HtmlAdithya SurampudiView Answer on Stackoverflow
Solution 3 - HtmlSmall Hadron ColliderView Answer on Stackoverflow
Solution 4 - HtmlChrisView Answer on Stackoverflow
Solution 5 - HtmlRaymond WachagaView Answer on Stackoverflow
Solution 6 - HtmlBaiJiFeiLongView Answer on Stackoverflow
Solution 7 - HtmlZohab AliView Answer on Stackoverflow