Если вы хотите, чтобы подчеркивание присутствовало при наведении курсора мыши на ссылку, то:

a:hover {text-decoration: underline; }

достаточно, однако вы также можете использовать имя класса «hover», если хотите, и следующее будет в равной степени применимо:

a.hover:hover {text-decoration: underline; }

Кстати, стоит отметить, что имя класса 'hover' на самом деле ничего не добавляет к элементу, поскольку псевдоэлемент a:hover делает то же самое, что и a.hover:hover. Если только это не просто демонстрация использования имени класса.

Есть много способов сделать это. Если вы действительно хотите иметь класс 'hover' в своем элементе A, вам нужно будет сделать:

a.hover:hover { code here }

Опять же, редко бывает такое className, вот как вы делаете обычное наведение:

select:hover { code here }

Вот еще несколько примеров:

1

HTML:

<a class="button" href="#" title="">Click me</a>

CSS:

.button:hover { code here }

2

HTML:

<h1>Welcome</h1>

CSS:

h1:hover { code here }

:hover — один из множества псевдоклассов.

Например, вы можете изменить, вы можете управлять стилем элемента при наведении на него курсора мыши, при щелчке по нему и при предыдущем щелчке по нему.

HTML:

<a class="home" href="#" title="Go back">Go home!</a>

CSS:

.home { color: red; }
.home:hover { color: green; }
.home:active { color: blue; }
.home:visited { color: black; }

Помимо неуклюжих цветов, которые я привел в качестве примера, ссылка с классом 'home' будет красной по умолчанию, зеленой, когда на них наводится указатель мыши, синей, когда они щелкаются, и черной, когда они щелкаются.

Надеюсь это поможет

Не ответ, а объяснение того, почему ваш css не соответствует HTML.

В css пространство используется как разделитель, чтобы указать браузеру искать дочерние элементы, поэтому ваш css

a .hover :hover{
   text-decoration:underline;
}

означает «искать элемент, затем искать его потомков, которые имеют класс наведения, и искать любых потомков тех потомков, которые имеют состояние наведения» и будет соответствовать этой разметке

<a>
   <span class="hover">
      <span>
         I will become underlined when you hover on me
      <span/>
   </span>
</a> 

Если вы хотите сопоставить ‹a class="hover">I will become underlined when you hover on me</a>, вы должны использовать a.hover:hover, что означает «искать любой элемент с наведением класса и с состоянием наведения».

а.наведите: наведите

Вам нужно объединить селектор и псевдоселектор. Вам также понадобится элемент стиля, чтобы содержать ваши стили. Большинство людей используют внешнюю таблицу стилей для множества преимуществ (кэширование для одного).

<a class="hover">click</a>

<style type="text/css">

    a.hover:hover {
        text-decoration: underline;

    }

</style>

Просто примечание: класс hover не нужен, если только вы не определяете только определенные ссылки для такого поведения (что может иметь место).

href является обязательным атрибутом элемента привязки, поэтому без него нельзя ожидать, что все браузеры будут обрабатывать его одинаково. Во всяком случае, я где-то читал в комментарии, что вы хотите, чтобы ссылка подчеркивалась только при наведении курсора, а не иначе. Для этого можно использовать следующее, и оно будет применяться только к ссылкам с классом hover:

<a class="hover" href="">click</a>

a.hover {
    text-decoration: none;
}

a.hover:hover {
    text-decoration:underline;
}

Вы должны были использовать:

a:hover {
    text-decoration: underline;
}

hover — это псевдокласс в CSS. Нет необходимости назначать класс.

В прошлый раз я работал над приятным дефектом и больше интересовался, как правильно использовать свойство hover для ссылки тега A и для браузера IE. Странным для меня было то, что IE не смог захватить элемент ссылки тега A на основе простого селектора A. Итак, я узнал, как даже принудительно захватить элемент тега A, и я заметил, что мы должны использовать более конкретный селектор CSS. Вот пример ниже - он работает отлично:

li a[href]:hover {...}