Css hover after: css — How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?

01.05.2023 Facebook Twitter LinkedIn Google+ Разное

Псевдокласс :hover | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+4.0+1.0+1.0+

Краткая информация

ПрименяетсяНе определено
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

Синтаксис

элемент:hover { … }

Значения

Нет.

Пример 1

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>hover</title>
  <style>
   a:link {
    color: #0000d0; /* Цвет ссылок */
    padding: 2px; /* Поля вокруг текста */ 
   }
   a:hover {
    background: #786b59; /* Цвет фона под ссылкой */ 
    color: #ffe; /* Цвет ссылки */ 
   } 
  </style>
 </head>
 <body>
  <p><a href="1. html">Ссылка 1</a></p>
  <p><a href="2.html">Ссылка 2</a></p>
  <p><a href="3.html">Ссылка 3</a></p> 
 </body>
</html>

В данном примере псевдокласс :hover применяется к ссылке (тегу <a>), при этом меняется цвет ссылки и фона под ней. Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдокласса :hover для ссылок

Пример 2

HTML5CSS2.1IECrOpSaFx

 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>hover</title>
  <style>
   ul {
    width: 180px; /* Ширина меню */
    list-style: none; /* Для списка убираем маркеры */
    margin: 0; /* Нет отступов вокруг */
    padding: 0; /* Убираем поля вокруг текста */
    font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
    font-size: 10pt; /* Размер названий в пункте меню */
   }
   li ul {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    margin-left: 165px; /* Сдвигаем подменю вправо */
    margin-top: -2em; /* Сдвигаем подменю вверх */
   }
   li a {
    display: block; /* Ссылка как блочный элемент */
    padding: 5px; /* Поля вокруг надписи */
    text-decoration: none; /* Подчеркивание у ссылок убираем */
    color: #666; /* Цвет текста */
    border: 1px solid #ccc;/* Рамка вокруг пунктов меню */
    background-color: #f0f0f0; /* Цвет фона */
    border-bottom: none; /* Границу снизу не проводим */
   }
   li a:hover {
    color: #ffe; /* Цвет текста активного пункта */
    background-color: #5488af; /* Цвет фона активного пункта */
   }
   li:hover ul { 
    display: block; /* При выделении пункта курсором мыши отображается подменю */
   }
   .
  brd {
    border-bottom: 1px solid #ccc; /* Линия снизу */
   }
  </style>
 </head>
 <body>
  <ul>
   <li><a href="russian.html">Русская кухня</a>
    <ul> 
     <li><a href="linkr1.html">Бефстроганов</a></li> 
     <li><a href="linkr2.html">Гусь с яблоками</a></li> 
     <li><a href="linkr3.html">Крупеник новгородский</a></li> 
     <li><a href="linkr4.html">Раки по-русски</a></li> 
    </ul> 
   </li> 
   <li><a href="ukrainian.html">Украинская кухня</a> 
    <ul> 
     <li><a href="linku1.html">Вареники</a></li> 
     <li><a href="linku2.html">Жаркое по-харьковски</a></li> 
     <li><a href="linku3.html">Капустняк черниговский</a></li> 
     <li><a href="linku4.html">Потапцы с помидорами</a></li> 
    </ul> 
   </li>
   <li><a href="caucasus.
 
 html">Кавказская кухня</a> 
    <ul> 
     <li><a href="linkc1.html">Суп-харчо</a></li> 
     <li><a href="linkc2.html">Лилибдж</a></li> 
     <li><a href="linkc3.html">Чихиртма</a></li> 
     <li><a href="linkc4.html">Шашлык</a></li> 
    </ul> 
   </li> 
   <li><a href="asia.html">Кухня Средней Азии</a></li> 
  </ul>
 </body>
</html>

В данном примере псевдокласс :hover добавляется к элементу списка (тег <li>) для создания двухуровневого меню. Результат примера показан на рис. 2.

Рис. 2. Использование :hover для создания меню

Браузеры

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

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

CSS по теме

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

Статьи по теме

  • Атрибут data-*
  • Всплывающая подсказка на CSS
  • Наложение и порядок слоёв
  • Полоски при наведении
  • Псевдоклассы
  • Рамки и границы
  • Свойства ссылок
  • Цвет ссылок

Рецепты CSS

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

CSS-селектор :not.

Полезные примеры

В спецификации и блогах про селектор :not обычно приводят какие-то искусственные примеры, которые хоть и объясняют синтаксис и принцип действия, но не несут никакой идеи о том, как получить пользу от нового селектора.

Например:

p:not(.classy) { color: red; }

Ну окей, думаю я, в моей практике не встречались такие ситуации. Обходились мы ведь как-то раньше без :not. Приходилось немного переписать структуру селекторов или обнулить пару значений.

Пример 1. Элемент без класса

Селектор :not может быть крайне полезен, когда нам нужно застилить контент сгенерированный пользователем (нет возможности расставить в нем классы), или когда у нас контента очень много и расставлять в нем классы слишком трудоёмко.

Например, мы хотим на сайте сделать красивые буллиты для ненумерованных списков ul li. Мы пишем код:

ul li { /* наши красивые стили */ }

В результате, наши красивые буллиты появляются не только в контенте, но и, например, в навигации, где тоже используются ul li.

Мы ограничиваем область действия селектора:

.content ul li { /* красота */ }

Навигацию мы спасли, но ненужные буллиты всё еще вылазят на слайдерах, списках новостей и других конструкциях внутри .content, где тоже используются ul li.

Далее у нас варианты:

1) обнулить мешающие стили в слайдерах и других местах. Но это противоречит «DRY» и является одним из признаков «вонючего» кода. К тому же не решает проблему раз и навсегда: добавите, например, аккордеон и списки в нем снова придется обнулять.

2) пойти от обратного и ставить класс всем спискам, которые нужно стилизовать:

.textlist li { /* красота */ }

Это добавляет лишней работы по расстановке классов в контенте. Иногда имеет смысл, но лишнюю работу никто не любит.

3) стилизовать только те ul li, у которых нет никаких классов вообще:

ul:not([class]) li { /* красота */ }

Победа! Нам не нужно делать дополнительную работу по расстановке классов в контенте. А на слайдерах, аккордеонах и прочих конструкциях, которые не должны выглядеть как списки, но используют их в своей разметке, в 99% случаев уже будут свои классы, и наши стили их не затронут.

Этот прием — «выбирать только элементы без класса» — очень полезен для оформления пользовательского контента и его можно применять не только к спискам, но и для других случаев.

Пример 2. Изменение внешнего вида всех элементов, кроме наведенного

Пример

Такой эффект можно реализовать без :not путем перезаписи значений. И это будет работать в бо́льшем количестве браузеров.

/* с перезаписью свойств */
ul:hover li {
  opacity:0.5;
}
ul:hover li:hover {
  opacity:1;
}

Но если придется обнулять слишком много свойств, то есть смысл использовать :not.

/* используя :not() */
ul:hover li:not(:hover) {
  opacity:0.5;
}

Пример 3. Меню с разделителями между элементами

Пример

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

Через перезапись свойств. Но тут два правила вместо одного, что не есть «DRY».

.menu-item:after {
  content: ' | ';
}
.menu-item:last-child:after {
  content: none;
}

Через

:nth-last-child(). Одно правило, но тяжело читается.

.menu-item:nth-last-child(n+2):after {
  content: ' | ';
}

Через :not() — самая короткая и понятная запись.

.menu-item:not(:last-child):after {
  content: ' | ';
}

Пример 4. Debug css

Удобно для отладки и самоконтроля искать/подсвечивать картинки без alt, label без for и другие ошибки.

/* подсвечиваем теги без необходимых атрибутов */
img:not([alt]),
label:not([for]),
input[type=submit]:not([value]) {
  outline:2px solid red;
}
/* тревога, если первый child внутри списка не li и прочие похожие примеры */
ul > *:not(li),
ol > *:not(li),
dl > *:not(dt):not(dd) {
  outline:2px solid red;
}

Пример 5.

Поля форм

Раньше текстовых полей форм было не много. Достаточно было написать:

select,
textarea,
[type="text"],
[type="password"] {
    /* стили для текстовых полей ввода */
}

С появлением новых типов полей в HTML5 этот список увеличился:

 
select,
textarea,
[type="text"],
[type="password"],
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="number"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="month"],
[type="week"] {
  /* стили для текстовых полей ввода */
}

Вместо перечисления 14 типов инпутов можно исключить 8 из них:

select,
textarea,
[type]:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([type="image"]) {
  /* стили для текстовых полей ввода */
}

Ладно, этот пример не очень красив, и я рекомендую всё же первый вариант с перечислением, он работает с IE8+, а второй вариант с IE9+.

Поддержка

Следует заметить, что согласно спецификации в скобках селектора :not() может стоять только простой селектор и в скобках нельзя использовать сам селектор

:not(). Если нужно исключить несколько элементов, :not() можно повторить несолько раз, как в примере 5.

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

Если очень нужны CSS3-селекторы в браузерах, которые их не поддерживают, можно использовать полифил selectivizr.

html — Что такое :hover::after?

спросил

Изменено 1 год, 1 месяц назад

Просмотрено 1к раз

Я следил за учебным пособием на YouTube, в котором использовался эффект наведения CSS, поэтому, когда вы наводите курсор на элементы панели навигации, линия постепенно появлялась из центра. Как работает :hover::after?

Это код CSS, который они показали в видео:

 nav{
  дисплей: гибкий;
  набивка: 2% 6%;
  выравнивание содержимого: пробел между;
  выравнивание элементов: по центру;
  положение: липкое;
}
навигационное изображение {
  ширина: 150 пикселей;
}
.nav-ссылки{
  гибкий: 1;
  выравнивание текста: вправо;
  зазор: 2рем;
}
.nav-ссылки ул ли {
  стиль списка: нет;
  отображение: встроенный блок;
  отступ: 8px 12px;
  положение: родственник;
}
.nav-ссылки на ли {
  цвет: #ffffff;
  размер шрифта: 13px;
  текстовое оформление: нет;
}
.nav-links ul li a::after{
  содержание: '';
  ширина: 0%;
  высота: 2 пикселя;
  фон: #f44336;
  дисплей: блок;
  маржа: авто;
  переход: 0,5 с;
}
.nav-links ul li a:hover::after{
  ширина: 100%;
}```
  • html
  • css
  • css-переходы

2

::after и :hover являются псевдоэлементами. Если у вас есть: hover, следующие стили будут применяться к элементу при наведении на него курсора. Но когда у вас есть: hover:: after, следующие стили будут применяться к псевдоэлементу :: after при наведении курсора на элемент. В этом случае псевдоэлемент ::after представляет расширяющуюся строку. И кстати, чтобы было понятно, что такое ::after, в CSS с помощью content , вы также можете определить HTML-контент, который будет отображаться в псевдоэлементе ::after, но в этом случае вам не нужно помещать туда какой-либо контент, это просто пустая форма.

0

При наведении курсора на элемент в теге case вы применяете стиль к псевдоэлементу ::after. В примере кода я вижу, что вы даете псевдоэлементу значение 100%, и таким образом вы меняете начальное значение ширины, равное 0,9.0005

0

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Как написать условие :hover для:before и a:after в CSS?

Улучшить статью

Сохранить статью

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Селекторы :before и :after в CSS используются для добавления содержимого до и после элемента. :hover — это псевдокласс, а :before и :after — псевдоэлементы. В CSS псевдоэлементы пишутся после псевдокласса.

    Синтаксис:  

     a:hover::before {
    // Свойство CSS
}
а: наведение :: после {
    // Свойство CSS
}

    В CSS3 двойное двоеточие (::) используется для обозначения псевдоэлемента. Для IE8 или старше используется одно двоеточие (синтаксис CSS2).

    Пример 1: В этом примере используется условие :hover для:before и:after в элементе.

    html

    < html >

        < head >

            < title >

                :hover condition for a:before

                and a:after

            title >

          

           < стиль >

    : до {ч. 0034

                 содержимое: "До -";

    }

    A: Hover :: After {

    Содержание: "-Apter";

              }

           style >

        head >

    < Body >

    < HREF = "#>"#> HOVER HREF = "#> HOVER HREF ="#> " HREF ="#> " HREF ="#> " .

    Comments
    Leave Comment