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

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

Глава 15

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

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

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

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

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

a:hover { color:#ff0000}

где:

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Псевдоклассы</title>
<style type="text/css">
.menu {
display: block;
width: 180px;
background-color:#fff8dc;

color:#008;
font-size: 16px;
text-decoration: none;
padding: 3px;
}
.menu:hover {
display: block;
width: 180px;
background-color:#b8860b;
color:#fff;
padding: 3px;
font-size: 16px;
text-decoration: none;
}
tr:hover {
background-color:#b8860b;
}
</style>
</head>
<body>
<p>Чем Вам не блок навигации по сайту?</p>
<a href="#">Главная</a>
<a href="#">Карта сайта</a>
<a href="#">Купить слона</a>
<a href="#">Продать слона</a>
<a href="#">Взять слона на прокат</a>
<hr>
<p>А вот ещё один распространенный трюк.. строки в таблице подсвечиваются при наведении на них курсором.</p>
<table border="1" bordercolor="#ccc" cellpadding="1" cellspacing="0">

<tr>
<td>Иванов</td><td>+</td><td>&nbsp;</td><td>&nbsp;</td><td>+</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>Петров</td><td>&nbsp;</td><td>+</td><td>&nbsp;</td><td>&nbsp;</td><td>+</td><td>&nbsp;</td>
</tr>
<tr>
<td>Сидоров</td><td>&nbsp;</td><td>&nbsp;</td><td>+</td><td>&nbsp;</td><td>&nbsp;</td><td>+</td>
</tr>
</table>
</body>
</html>

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

Как Вы наверное заметили в качестве селектора псевдокласса может выступать не только какой либо элемент - тег, но и класс или идентификатор. Так в примере к классу

.menu применён псевдокласс hover и синтаксис приобретает следующий вид:

.menu:hover { color:#ff0000;}

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Псевдоклассы и ссылки</title>
<style type="text/css">
a:link {color:#0000ff}
a:active {color:#ff0000}
a:visited {color:#008000}
</style>
</head>
<body>
<a href="#1">Ссылка на первый якорь</a>
<a href="#2">Ссылка на второй якорь</a>
<a href="#3">Ссылка на третий якорь</a>
<hr>
<a name="1"><h5>Первый якорь</h5></a>
<p>Псевдокласс link, в этом примере, указывает, что все не посещенные ссылки должны отображаться синим цветом.</p>
<a name="2"><h5>Второй якорь</h5></a>
<p>Попробуйте нажить и удерживать на одну из не посещенных ссылок, чтобы увидеть для работу псевдокласса active.</p>

<a name="3"><h5>Третий якорь</h5></a>
<p>visited - псевдокласс который, в этом примере, говорит о том, что все посещенные ссылки должны отображаться зеленым цветом.</p>
</body>
</html>

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

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Псевдокласс focus</title>
<style type="text/css">
input:focus {color: red}
</style>
</head>
<body>
<form>
<input type="text" value="Введите текст в эту форму" size="30">

</form>
<p>Ввели? а теперь щелкните по пустому месту на экране чтобы форма потеряла фокус.</p>
</body>
</html>

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

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

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

<div>- блок родитель
<p></p> - первый дочерний элемент
<p></p> - второй дочерний элемент
</div>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Псевдокласс first-child</title>
<style type="text/css">
div {
margin: 20px;
padding: 30px;
background-color: #c0e4ff;
border: 2px solid #008000
}
p {
color: #555;
background-color: #dcdcdc;
border: 2px solid #555
}
p:first-child {
color: #f00;
background-color: #c5ffa0;
border: 2px solid #008000
}
</style>
</head>
<body>
<div>
<p>первый дочерний параграф - он выделен псевдоклассом first-child</p>
<p>второй дочерний параграф</p>
<p>третий дочерний параграф</p>
</div>
<div>
<p>и здесь первый дочерний параграф выделен хотя блок родитель уже другой</p>

<p>второй дочерний параграф</p>
</div>
</body>
</html>

Обратите внимание на тот факт, что если бы в блоке родителе перед дочерними параграфами стоял любой другой тег, заголовок <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(en) {font-style: italic}

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Псевдокласс lang</title>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv="Content-Language" Content="ru">
<style type="text/css">
p:lang(ru) {color: #00f;}
p:lang(en) {color: #f00;}
</style>
</head>
<body>
<p lang="ru">Русский текст выделен синим</p>
<p lang="en">English text is chosen red</p>
</body>
</html>

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

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

Пишется так:

q:lang(en) {quotes: "\201C" "\201D"}

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Псевдокласс lang. Цитаты.</title>
<meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251">
<meta http-equiv="Content-Language" Content="ru">
<style type="text/css">
div {
color:#000;
font-size: 24px;
}
q:lang(en) {quotes: "\201C" "\201D"}
q:lang(de) {quotes: "\201E" "\201C"}
q:lang(fr) {quotes: "\00AB" "\00BB"}
q:lang(ru) {quotes: "ёклмн.." "..ёпрст"}
</style>
</head>
<body>
<div>
<p>Обратите внимание на вид кавычек для цитат:<p>
<q>Цитата по умолчанию</q><br>
<q lang="fr">Французская цитата</q><br>
<q lang="de">Немецкая цитата</q><br>
<q lang="en">Английская цитата</q><br>
<q lang="ru">Русская цитата</q><br>
</div>
</body>
</html>
  • Псевдоклассы нельзя внедрять в 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

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

Синтаксис

HTML :hover { sRules }
Скрипты N/A

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

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

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

В каких браузерах работает?
8.0+ 1.0+ 4.0+ 1.0+ 1.0+ - -
В каких версиях CSS используется?
CSS 1 CSS 2 CSS 2.1 CSS 3
- + + +
Для чего используется?

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

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

hover

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

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

hoverhover

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, если у них нет якорного тега вокруг них? Это чисто спекуляция, но мне интересно, есть ли в ней какая-то заслуга?

css

Поделиться Источник 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



Почему Bootstrap содержит как классы, так и псевдоклассы для focus и active?

Я пытаюсь понять, как кнопки Bootstrap стилизуются, проверяя элемент кнопки в Chrome и используя флажки force element state, чтобы увидеть стиль для наведения, фокусировки и активных состояний (а...


Используйте псевдоклассы с переменными в Sass

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


Что такое псевдоклассы и для чего они используются?

Я здесь совсем недавно. Я видел много вопросов и ответов на них. Но у меня есть вопрос, так как я открыл сайт блога. Мой вопрос заключается в том, что такое псевдоклассы и для чего они используются?


nth-дочерние селекторы (псевдоклассы) в IE 8

Мне нужно выражение `tr:nth-child(2n){background-color: #ddd;}` чтобы окрасить каждую вторую строку для таблицы, которую я создаю динамически. Но это выражение работает только для IE9. Так можно ли...


Java FX 2 CSS Псевдоклассы

Как я могу создать свои собственные псевдоклассы CSS в Java FX 2? Так что в файле CSS я мог бы использовать этот стиль .MyButton : online{ } В FX 1 это может быть сделано переопределяя методы, такие...


как применить псевдоклассы (nth-of-type) в браузерах IE8 и ниже

Есть ли способ применить псевдо-классы, такие как (nth-of-type) в IE8 и ниже браузерах? Я попытался использовать плагины, такие как jquery-extended-selectors.js в этой ссылке [эта ссылка содержит...


CSS псевдоклассы со встроенными стилями

Можно ли иметь псевдоклассы, использующие встроенные стили? Пример: <a href=http://www.google.com style=hover:text-decoration:none;>Google</a> Я знаю, что выше HTML не будет работать, но...


Javascript псевдоклассы, jQuery обработчики событий и "это"

У меня есть большой проект Javascript, который я пытаюсь рефакторинговать в псевдоклассы: jsFiddle: http://jsfiddle.net/waitinforatrain/7T42w / var MyNameSpace = {} MyNameSpace.MyClass = function()...


CSS:hover проблема при попытке отобразить непрозрачный textbox

Кажется, я не могу заставить CSS:hover работать правильно. Я пытаюсь отобразить textbox, у которого непрозрачность установлена в 0, когда вы наводите курсор на My Website. Я достиг чего-то подобного...


ReactJS + стилизованные компоненты + псевдоклассы

Можно ли использовать псевдоклассы для укладки компонентов. У меня есть checkbox, который должен отображать SVG изображение: checked/ unechecked для отображения состояния как selected/unselected. я...


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *