Hover псевдокласс – Как еще оживить HTML-страничку, или «Достойная замена использованию псевдоклассов :hover, :active» (шпаргалка для начинающих)

Псевдоклассы. Учебник CSS.

Глава 15

Псевдоклассы — это особые свойства, которые позволяют менять стиль элемента в зависимости от действий пользователя, а так же положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой. Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсором.

Вот список всех псевдоклассов:

• hover — Стиль элемента на который наведён курсор мыши.
• active — Стиль для ссылки которая становится активной, но переход по ней еще не совершен.
• visited — Стиль для недавно посещённой ссылки.
• link — Стиль для нечасто посещаемой ссылки.
• focus — Стиль элемента находящегося в фокусе.
• first-child — Стиль первого дочернего элемента.
• lang — Определяет язык, который используется в фрагменте документа.

О каждом псевдоклассе мы отдельно поговорим ниже, а сейчас пару слов о синтаксисе.

Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса:

где:

a — элемент (селектор), а проще тег к которому мы решили применить псевдокласс в нашем случае это ссылка.
:hover — после двоеточия собственно нужный нам псевдокласс.
{color:#ff0000} — ну и блок объявления стилей в фигурных скобках.

А вся эта запись вместе будет говорить о том, что если навести курсором на такую ссылку — то она покраснеет.

Так собственно мы подошли к первому, самому популярному, псевдоклассу hover.

Как Вы уже, наверное, догадались, псевдокласс hover активизируется в том случае, если на элемент наведен курсор.

Ну а раз уж догадались просто покажу пример:

Несколько слов к примеру выше..

Как Вы наверное заметили в качестве селектора псевдокласса может выступать не только какой либо элемент — тег, но и класс или идентификатор. Так в примере к классу .menu применён псевдокласс hover и синтаксис приобретает следующий вид:

Не запутались в терминологии?

Простыми словами мы сказали браузеру что мол подсвечивай красным только те ссылки которые находится в навигационном блоке (выведены в класс

Псевдокласс hover может быть применён к любому элементу, выводимому на экран, так в нашем примере, для того чтобы организовать подсветку строк таблицы мы применили его к тегу <tr>. Однако следует отметить, что браузер Internet Explorer 6 и его более ранние версии поддерживает псевдокласс hover только для ссылок — тег <a>, так что, к примеру, строки таблицы, при наведении на них курсора, в браузерах IE6 и ниже подсвечиваться не будут!

Рассмотрим сразу три псевдокласса созданных для работы со ссылками.

• active — Стиль активной ссылки.
• visited — Стиль для недавно посещённой ссылки.
• link — Стиль для нечасто посещаемой ссылки.

Сначала покажу пример:

Теперь расскажу более подробно.

Псевдокласс active присваивает ссылке определённый стиль в тот момент когда эта ссылка активна, то есть в тот момент когда пользователь нажал на ссылку, но еще не отпустил кнопку мыши. Короче active — это стиль ссылки в момент клика по ней.

Браузеры некоторое время помнят, на какие ссылки нажимал пользователь в последнее время, так вот, псевдокласс visited

Псевдокласс link описывает стиль ссылки, которая ранее не посещалась пользователем. Надо отметить, что никакой ощутимой разницы между записью a {…} и a:link {…} нет, так что применение данного псевдокласса в этом случае ровным счетом ничего не меняет.

Все три вышеперечисленных псевдокласса предназначены для работы с ссылками, однако псевдокласс active может быть применён к любому элементу — работать будет везде, кроме браузера Internet Explorer 6 и ниже.

Данный псевдокласс определяет стиль элемента, если тот находится в фокусе. Теперь собственно о том, что такое фокус?.. как в случае с оптикой и иллюзией, слово фокус в CSS обозначат, что некий объект, а точнее элемент, находится в центре внимания наблюдателя — пользователя. Такими элементами могут быть теги <a> <input> <select>

Посмотрите на пример:

В примере текст в текстовом поле <input> изначально чёрный, но как только элемент получает фокус — то есть тогда когда пользователь кликнет по данному полю и начнет набирать текст, он окрасится красным.

Вот и весь фокус-покус..

Думаю, в ходе обучения CSS Вы уже поняли, что все элементы можно определить как родительские или дочерние и что элемент родитель может содержать в себе несколько дочерних элементов, ну например:

Так вот псевдокласс first-child определят стиль первого дочернего элемента находящегося в родительском контейнере.

Обратите внимание на тот факт, что если бы в блоке родителе перед дочерними параграфами стоял любой другой тег, заголовок <h2> к примеру, то псевдокласс first-child уже не действовал бы к первому параграфу.. так как хоть параграф то он и первый, но элемент в блоке родителе уже второй.

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

Псевдокласс lang определяет язык текста того или иного элемента или документа в целом.

Если Вы помните из курса HTML, язык документа определяют атрибуты: charset — кодировка документа и content — язык документа для тега <meta>.

<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Content-Language» Content=»ru»>

Так вот для того чтобы определить язык отдельно взятого текстового блока используют псевдокласс lang() — в круглых скобках которого собственно и указывается язык.

Язык может быть:

• ru — Русский
• en — Английский
• de — Немецкий
• fr — Французский
• it — Итальянский

Всё вместе пишется так:

— здесь мы указали, что текст взятый в контейнер <span> английский и что он должен отображаться курсивом.

Пример:

Обратите внимание, что в теге, в нашем случая параграфе, мы указываем с помощью атрибута lang используемый язык и его стиль: <p lang=»en»>текст</p> прописанный в блоке CSS.

Так же псевдокласс lang позволяет определять вид кавычек для цитат (тег <q>) с помощью значения quotes — кавычки. В России привычно использовать двойные кавычки, в других странах дела обстоят иначе.

Пишется так:

В фигурных скобках после значения quotes указывается юникод символа/ов или просто смвол/ы для открывающей и закрывающей кавычки.

Пример:

• Псевдоклассы нельзя внедрять в HTML документ с помощью атрибута style. Можно только с помощью тега <style> в голове документа или внешнего CSS файла.

• Если селектор, какого либо псевдокласса, явно не указывать, а написать вот так, например:

  :hover {color: #ff0}

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

• Браузер IE6 и ниже игнорирует практически все псевдоклассы.

Псевдокласс hover

Всем привет. Итак, что же такое псевдокласс hover в CSS. Это, прежде всего, набор свойств, применяемых к элементу. Но видимость всех этих свойств появляется лишь тогда, когда на определенный объект наводится курсор мыши. Для примера можно посмотреть на ссылки. Обычно они все как-то меняются при наведении на них курсора. Я недавно писал про красивый эффект для ссылок, так вот, там как раз применяется псевдокласс hover. Практически ко всем фрагментам можно применить псевдокласс hover и это безусловно будет выделять его из общего потока на странице. Если у вас блог или магазин, примените на страницах псевдокласс hover и сайт тут же оживет.

Можно так же сделать всплывающие подсказки на CSS, с использованием того же псевдокласса hover. В своих материалах на тему CSS, много где упоминается про этот псевдокласс, но давайте все же разберем небольшой и самый простой пример. За пример возьмем тег «а». Пишем обычный линк без применения к нему каких-либо свойств. Браузер будет использовать  свои собственные стили.

<a href="#">ССЫЛКА</a>

<a href=»#»>ССЫЛКА</a>

И в CSS пишем те свойства, которые мы хотим видеть у этого элемента при наведении курсора. Давайте сделаем ее зеленой и уберем подчеркивание.

1
2
3
4

a:hover{
 color:green;
 text-decoration:none;
}

a:hover{ color:green; text-decoration:none; }

Демо

Это самый простой пример того, что можно сделать с псевдоклассом hover. На моем блоге задействовано множество элементов, но я не хочу вам их перечислять потому, как возможно когда вы будете это читать, тех эффектов уже не будет. На самом деле перечислять все эффекты не имеет смысла, их огромное множество и ограничить в этом может только ваша фантазия. Но увлекаться сильно не стоит. Как говорится -все хорошо в меру. Если что-то было непонятно, то напишите об этом в комментариях.

Справочник по CSS : Тематический указатель : Псевдоклассы : :hover — WebWikiABCD

Псевдокласс :hover

Задает стиль элемента, на который наведен курсор мыши.

Синтаксис

Используемые значения

sRules

Строковое значение, которое определяет одну или более CSS-пару атрибут/значение.

Замечания

Наведение означает, что пользователь расположил курсор мыши на объекте, но не кликнул по нему или еще не активировал его каким-либо другим способом. Псевдокласс :hover изменяет стиль объекта, когда на него наведен курсор мыши. Как только пользователь убрал курсор мыши — стиль объекта снова становится прежним.

Псевдокласс :hover часто используется вместе с другими псевдоклассами :active, :link и :visited, предназначенными для задания стиля ссылкам. Причем, важен порядок описания псевдоклассов. Стилевое правило для :hover должно идти после стилевых правил для :link и :visited, чтобы псевдоклассы не перекрывали друг друга.

В Internet Explorer 6.0 и более ранних версиях псевдокласс :hover применяется только для ссылок.

Начиная с Internet Explorer 7.0 добавилась поддержка и других объектов для псевдокласса :hover.

Необдуманное и беспорядочное использование псевдокласса :hover может существенно замедлить загрузку web-страницы.

Примеры

В первом примере задается стиль якорной ссылки с помощью псевдокласса :hover. При наведении на нее, текст станет красным, жирным и изменится цвет фона.

<style>
    a:hover { color:red; background-color:beige; font-weight:bolder; }
</style>

<a href="#below">Кликните здесь, чтобы перейти вниз страницы.</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="below"></a> 

Во втором примере показано как применять псевдокласс :hover для различных элементов.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
<style type="text/css">
    body:hover { background: url("wlbigielogo.gif") no-repeat center center; }
    h2:hover   { color: red; }
    img        { vertical-align: middle; }
    .zoom img  { zoom: 0.5; }
    img:hover  { zoom: 1.0; cursor: hand; }
    img.spacer { width: 0px; height: 30px; }
</style>
</head>
<body>
<h2>Наведите курсор вот сюда.</h2>
<img src="blank.gif">
<span>
<img src="A.gif">
<img src="B.gif">
<img src="C.gif">
. . .
<img src="X.gif">
<img src="Y.gif">
<img src="Z.gif">
</span>
</body></html> 

Стандарты

Этот псевдокласс определен в CSS, Level 2 Revision 1 (CSS2.1)

Поддерживаемые браузеры

Internet Explorer 7.0, 8.0 (в версиях 6.0 и ниже поддерживается частично)

Opera 7.0, 8.0, 9.2, 9.5, 10.0

Safari 1.3, 2.0, 3.1

Firefox 1.5, 2.0, 3.0

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms530766(VS.85).aspx

Псевдокласс :hover. CSS справочник | Vaden Pro

Характеристики свойства

В каких браузерах работает?

В каких версиях CSS используется?

Для чего используется?

Устанавливает индивидуальный стиль для объекта рпи наведении на него курсора мыши. Стоит отметить, что этот псневдокласс срабатывает без клика, а только от наведения на элемент. Это важно помнить и не путать с :active.

Как правильно задавать?

селектор:hover { ... }

Какие могут быть значения?

Нет.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>hover</title>
  <style>
   .menu { 
    background: #4757c8; 
	display:block;
	width:380px;
	margin:0px auto;
   }
   .menu a {
    color: #fff; 
    display: inline-block; 
    border-left: 1px solid #04148e; 
    padding: 5px 10px;
	text-transform:uppercase;
	margin-right:-4px;
	text-decoration:none;
   }
   .menu a:first-child {
    border-left: none; 
   }
   .menu a:hover {
    background: #eee;
	color:#444;
   }
  </style>
 </head>
 <body>
  <div>
    <a href="#">Главная</a>
    <a href="#">Новости</a>
    <a href="#">Блог</a>
    <a href="#">Контакты</a>
  </div>
 </body>
</html>

По итогу получаем

Оценок: 2 (средняя 5 из 5)

Тип CSS свойства: 

CSS:hover и псевдоклассы в целом

Ref: формы, кнопки Post и submit

Следуя моему последнему вопросу, я попытался создать стиль своих входных тегов.

Я пытался

.as_link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:visited {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:hover {
    text-decoration: underline;
    background: #F4F0F0;
}

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

input.as_link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:visited {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:hover {
    text-decoration: underline;
    background: #F4F0F0;
}

Все еще нет кости на наведении. Стандарт вступает в силу, но наведение ничего не делает. Мой вопрос заключается в следующем:

Каковы правила назначения псевдоклассов в целом? Не только в моем случае выше, но они только для якорей или вы можете использовать их для каких-либо элементов?

Заранее спасибо.

Изменить: это не локально для IE. Эта проблема возникает также в Opera 9 и FF3.

Edit2: я чувствую, что это как-то связано с тем, что hover нуждается в ссылке и посещается до нее. Кажется, что браузеры игнорируют ссылку и visted, если у них нет якорного тега вокруг них? Это чисто спекуляция, но мне интересно, есть ли в ней какая-то заслуга?

Поделиться Источник Dorjan     17 августа 2009 в 15:41

4 Ответов

3

Не только в моем случае выше но и являются ли они только для якорей или вы можете их использовать для каких элементов?

Ну уж нет. CSS псевдоклассы используются для добавления специальных эффектов к некоторым селекторам.

Синтаксис псевдоклассов:

selector:pseudo-class {property:value}

CSS классы также можно использовать с псевдоклассами:

selector.class:pseudo-class {property:value}

Якорные псевдоклассы

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

a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */

Псевдоклассы могут быть объединены с классами CSS:

a.red:visited {color:#FF0000}

<a href="css_syntax.asp">CSS Syntax</a>

Если ссылка в приведенном выше примере была посещена, она будет отображаться красным цветом.

В :во-первых-ребенок псевдо-класса

Псевдокласс: first-child соответствует указанному элементу, который является первым дочерним элементом другого элемента.

В следующем примере селектор соответствует любому

элемент, являющийся первым дочерним элементом любого элемента:

<html>
  <head>
    <style type="text/css">
    p:first-child
    {
      color:blue
    }
    </style>
</head>

  <body>
    <p>I am a strong man.</p>
    <p>I am a strong man.</p>
   </body>
</html> 

Псевдоклассы число указывает, в какой версии CSS определено свойство (CSS1 или CSS2).

:active      Adds a style to an element that is activated   1
:first-child Adds a style to an element that is the first child of 
             another element    2
:focus   Adds a style to an element that has keyboard input focus   2
:hover   Adds a style to an element when you mouse over it  1
:lang    Adds a style to an element with a specific lang attribute  2
:link    Adds a style to an unvisited link  1
:visited     Adds a style to a visited link     1

Более подробная информация здесь.

Поделиться eKek0     17 августа 2009 в 15:52

Поделиться Santi     17 августа 2009 в 15:49

1

Вы можете использовать псевдо-селекторы для любого элемента, который вам нравится, независимо от того, интерпретирует ли browser/user-agent или применяет их, к сожалению, полностью зависит от них.

Подробный обзор css псевдоселекторов (я не смог найти ни одного, специально ограниченного псевдоселекторами) находится по адресу: Quirksmode .

Короче говоря, IE6-это проблема для :hover и :active на всем, кроме ссылок; IE 7 играет немного лучше, но поддерживает только :active на не-ссылках.

IE8, кажется, довольно хорошо up-to-spec, поскольку css2.1 псевдо-селекторы идут.

Поделиться David Thomas     17 августа 2009 в 15:50

0

Мне кажется, я только что нашел ответ….

Мой код был испорчен.

input.as_link:hover {
    text-decoration: underline;
    background: yellow;
}
input.as_link:focus {
    text-decoration: underline;
    background: yellow;
}
input.as_link:focus:hover {
    text-decoration: underline;
    background: yellow;
}

Подчеркивание не работает, потому что это не «text» и текст не выделен. Стыдно, но о, хорошо, цвет фона, который я выбрал, не появился… Я думаю, что ввел один неверно (или то же самое, что и фон). Ярко-желтый цвет сработал.

Спасибо всем, кто хоть что-то ответил!

Поделиться Dorjan     17 августа 2009 в 16:22