a.hover: зависать

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

a:hover {text-decoration: underline; }

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

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

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

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

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

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

<style type="text/css">

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

    }

</style>

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

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

a:hover {
    text-decoration: underline;
}

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

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

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

a.hover {
    text-decoration: none;
}

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

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

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, что означает «искать любой элемент с классом hover и с состоянием наведения»

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

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