Как использовать «парить» в CSS - PullRequest
Новая
       32

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

29 голосов
/ 25 мая 2009

Я использовал код ниже для выполнения этой цели:

При наведении курсора мыши на якорь появляется подчеркивание

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

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

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

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

Ответы [ 9 ]

34 голосов
/ 25 мая 2009

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

a:hover {text-decoration: underline; }

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

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

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

7 голосов
/ 29 сентября 2012

Есть много способов сделать это. Если вы действительно хотите, чтобы в вашем элементе 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' будет по умолчанию красной, зеленой при наведении курсора мыши, синей при нажатии и черной после нажатия.

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

6 голосов
/ 28 января 2013

Не ответ, а объяснение того, почему ваш CSS не соответствует HTML.

В css space используется как разделитель, чтобы указать браузеру, что нужно смотреть на детей, поэтому ваш css 

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

означает «искать элемент, затем искать любые его потомки, которые имеют класс наведения, и искать любые потомки тех потомков, которые имеют состояние наведения» и будет соответствовать этой разметке 

<a>
   <span class="hover">
      <span>
         I will become underlined when you hover on me
      <span/>
   </span>
</a>

Если вы хотите сопоставить <<code>a class="hover">I will become underlined when you hover on me</a>, вам следует использовать a.hover:hover, что означает «искать любой элемент с классом hover и с состоянием наведения»

4 голосов
/ 25 мая 2009 
a.hover:hover {
    text-decoration:underline;
}
4 голосов
/ 25 мая 2009

a.hover: парить

2 голосов
/ 25 мая 2009

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

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

<style type="text/css">

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

    }

</style>

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

1 голос
/ 03 июля 2009

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

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

a.hover {
    text-decoration: none;
}

a.hover:hover {
    text-decoration:underline;
}
0 голосов
/ 02 декабря 2013

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

li a[href]:hover {...}
0 голосов
/ 25 мая 2009

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

a:hover {
    text-decoration: underline;
}

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

...