如何在悬停时从名称中删除下划线

Question

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?

Answer 1

try this:

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

Answer 2

删除锚标记的文本装饰

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

Answer 3

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

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

Answer 4

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

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

Answer 5

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

Answer 6

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

Answer 7

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"