Как использовать «парить» в CSS
129102 просмотра
9 ответа
Я использовал код ниже для выполнения этой цели:
При наведении курсора мыши на якорь подчеркивание
но это не сработало,
<a class="hover">click</a>
a .hover :hover{
text-decoration:underline;
}
Какая версия подходит для этого?
Автор: omg Источник Размещён: 12.11.2019 09:53Ответы (9)
34 плюса
Если вы хотите, чтобы подчеркивание присутствовало при наведении курсора мыши на ссылку, то:
a:hover {text-decoration: underline; }
достаточно, однако вы также можете использовать имя класса 'hover', если хотите, и в равной степени применимо следующее:
a.hover:hover {text-decoration: underline; }
Кстати, стоит отметить, что имя класса 'hover' на самом деле ничего не добавляет к элементу, поскольку psuedo-элемент a:hover
делает то же самое, что и элемент a.hover:hover
. Если только это не демонстрация использования имени класса.
7 плюса
Есть много способов сделать это. Если вы действительно хотите, чтобы в вашем элементе 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' будет по умолчанию красной, зеленой, когда мышь наведет на них курсор, синей, когда они нажаты, и черной, когда они были нажаты.
Надеюсь это поможет
Автор: SirCommy Размещён: 29.09.2012 05:586 плюса
Не ответ, а объяснение того, почему ваш 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 и с состоянием наведения»
4 плюса
4 плюса
2 плюса
Вам необходимо объединить селектор и псевдо-селектор. Вам также понадобится элемент стиля, который будет содержать ваши стили. Большинство людей используют внешнюю таблицу стилей для многих преимуществ (кэширование для одного).
<a class="hover">click</a>
<style type="text/css">
a.hover:hover {
text-decoration: underline;
}
</style>
Просто примечание: класс hover не нужен, если только вы не определяете только определенные ссылки, чтобы иметь такое поведение (что может иметь место)
Автор: alex Размещён: 25.05.2009 01:281 плюс
Href является обязательным атрибутом элемента привязки, поэтому без него вы не сможете ожидать, что все браузеры будут обрабатывать его одинаково. Во всяком случае, я читал где-то в комментарии, что вы хотите, чтобы ссылка была подчеркнута при наведении курсора, а не иначе. Для этого можно использовать следующее, и оно будет применяться только к ссылкам с классом наведения мыши :
<a class="hover" href="">click</a>
a.hover {
text-decoration: none;
}
a.hover:hover {
text-decoration:underline;
}
Автор: PatrikAkerstrand
Размещён: 03.07.2009 02:06
0 плюса
Вы должны были использовать:
a:hover {
text-decoration: underline;
}
hover
псевдокласс в CSS Нет необходимости назначать класс.
0 плюса
В прошлый раз я работал над хорошим дефектом и больше думал о том, как правильно использовать свойство hover для ссылки тега и для браузера IE. Для меня странным было то, что IE не смог захватить элемент ссылки тега, основанный на простом селекторе A. Итак, я узнал, как даже принудительно захватить элемент тега, и заметил, что мы должны использовать более специфичный CSS-селектор. Вот пример ниже - он отлично работает:
li a[href]:hover {...}
Автор: JPawelHeaven
Размещён: 02.12.2013 11:06
Вопросы из категории :
- css Как определить, какой из указанных шрифтов был использован на веб-странице?
- css Создание закругленных углов с помощью CSS
- css Как автоматически изменить размер текстовой области с помощью Prototype?
- css Как вы можете настроить номера в упорядоченном списке?
- css Как я могу найти неиспользуемые изображения и стили CSS на веб-сайте?
- css Как заставить нижний колонтитул оставаться внизу веб-страницы?
- hover Смещение встроенных элементов при выделении жирным шрифтом при наведении
- hover Цвет фона div, чтобы изменить его
- hover Как использовать «парить» в CSS
- hover Установите: hover в зависимости от класса
- hover Как подать заявку ребенок: hover, но не родитель: hover
- hover Как я могу изменить цвет кнопки при наведении курсора?
- anchor Программно выделите тег привязки
- anchor Как вы можете проверить #hash в URL, используя JavaScript?
- anchor Сделайте div в ссылку
- anchor HTML: создание ссылки, ведущей к якору по центру страницы
- anchor C # Anchor свойство не работает