Как использовать "зависание" в CSS
Я использовал следующий код, чтобы выполнить эту задачу:
Когда мышь наводится на якорь, появляется подчеркивание,
но он не работал,
<a class="hover">click</a>
a .hover :hover{
text-decoration:underline;
}
Какая правильная версия для этого?
Ответы
Ответ 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 {...}