click a .hover :hover{ text-decoration:underline; }Какая версия подходит для этого?" />

Как использовать «парить» в CSS

css hover anchor

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. Если только это не демонстрация использования имени класса.

Автор: David Thomas Размещён: 25.05.2009 01:28

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:58

6 плюса

Не ответ, а объяснение того, почему ваш 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 и с состоянием наведения»

Автор: valentinas Размещён: 28.01.2013 03:39

4 плюса

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

Автор: Ballsacian1 Размещён: 25.05.2009 01:27

4 плюса

a.hover:hover {
    text-decoration:underline;
}
Автор: chaos Размещён: 25.05.2009 01:28

2 плюса

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

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

<style type="text/css">

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

    }

</style>

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

Автор: alex Размещён: 25.05.2009 01:28

1 плюс

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 Нет необходимости назначать класс.

Автор: Alan Haggai Alavi Размещён: 25.05.2009 01:28

0 плюса

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

li a[href]:hover {...}
Автор: JPawelHeaven Размещён: 02.12.2013 11:06
Вопросы из категории :
32x32