Как убрать подчеркивание с имени при наведении курсора

У меня такой html:

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

legend.green-color{
    color:green;
}

В моем случае он Sectionвыглядел зеленым, но когда я наводил на него указатель мыши, он становился похожим на href, но я хочу, чтобы он оставался таким же, без подчеркивания и изменения цвета.

Можно ли достичь без изменения css или с минимальным изменением css?

а может быть как то с jquery?

попробуй это:

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

Удалите текстовое оформление тега привязки

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

Для этого вы можете использовать CSS ниже legend.green-color a:hover.

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

Чтобы сохранить цвет и предотвратить подчеркивание ссылки:

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

Вы можете назначить идентификатор конкретной ссылке и добавить CSS. См. Шаги ниже:

1. Добавьте идентификатор по вашему выбору (имя должно быть уникальным; может начинаться только с текста, а не числа):

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

2. Затем добавьте необходимый CSS следующим образом:

   #smallLinkButton:hover,active,visited{
   
         text-decoration: none;
         }