Подтвердить что ты не робот

Как использовать "зависание" в CSS

Я использовал следующий код, чтобы выполнить эту задачу:

Когда мышь наводится на якорь, появляется подчеркивание,

но он не работал,

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

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

Какая правильная версия для этого?

4b9b3361

Ответ 1

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

a:hover {text-decoration: underline; }

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

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

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

Ответ 2

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

a.hover:hover { code here }

И опять же, необычно иметь такой классName, так вы регулярно наводите курсор:

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

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

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

Ответ 3

Не ответ, но объяснение, почему ваш 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, что означает "искать какой-либо элемент с зависанием класса и с состоянием зависания"

Ответ 4

a.hover: парить

Ответ 5

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

Ответ 6

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

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

<style type="text/css">

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

    }

</style>

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

Ответ 7

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

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

a.hover {
    text-decoration: none;
}

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

Ответ 8

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

a:hover {
    text-decoration: underline;
}

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

Ответ 9

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

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