A hover html: CSS :in-range Selector

Разное 

Содержание

html — Нужно сделать так чтобы псевдоэлемент не реагировал на hover, CSS

Задать вопрос

Вопрос задан

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

Просмотрен 224 раза

link имеет анимацию появления underline в навигации. При наведении на link, подчеркивание выезжает вверх. Но если курсором успеть навести на эту линию, hover анимация снова срабатывает. Есть ли способ избежать этого и сделать активацию hover только по наведению на ссылку?

body {
  background-color: #e6f0ff
}
ul {
  list-style: none;
}
.header--nav {
  display: flex;
  padding: 38px 0;
  column-gap: 64.5px;
  align-items: center;
}
.nav--list {
  display: flex;
  margin-right: auto;
  column-gap: 30px;
}
. nav--link {
  position: relative;
  font-size: 0.875em;
  font-weight: 500;
  color: #5a6473;
  line-height: 1.3125;
  text-decoration: none;
}
.nav--link:visited {
  color: #5a6473;
}
.nav--link::after {
  display: block;
  position: absolute;
  bottom: -10px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #5a6473;
  opacity: 0;
  border-radius: 5px;
  transition: all 0.2s ease-in;
}
.nav--link:hover {
  color: #2d323a;
}
.nav--link:hover::after {
  bottom: -3px;
  opacity: 1;
}
.nav--link:active {
  color: #717d8f;
}
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Fratures</a></li>
  <li><a href="#">Service</a></li>
  <li><a href="#">Listed</a></li>
  <li><a href="#">Contact</a></li>
</ul>
  • html
  • css
  • navigation
  • псевдоэлемент

2

На тот (псевдо)элемент, который не должен реагировать на мышь:

pointer-events: none;

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

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Свойства CSS — hover

БраузерInternet ExplorerNetтscapeОпераSafariMozilla Firefox
Версия5. 56.07.08.08.09.07.08.09.29.51.32.03.11.52.03.0
ПоддерживаетсяЧаст.Част.ДаДаДаДаДаДаДаДаДаДаДаДаДаДа

Част. — поддерживается частично.

CSS (ЦСС)CSS (ЦСС)1
ПрименяетсяНе определено
Аналог ШТМЛ<тег>
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/selector.ШТМЛ#dynamic-pseudo-classes

Описание

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

Синтаксис

A:hover { … }

Аргументы

Нет.

Пример 1

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>link</title>
  <style type="text/CSS (ЦСС)">
   a:link {
    color: #0000d0; /* Цвет ссылок */
    padding: 2px; /* Поля вокруг контента */ 
   }
   a:hover {
    background: #786b59; /* Цвет фона под ссылкой */ 
    color: #ffe; /* Цвет ссылки */ 
   } 
  </style>
 </head>
 <body>
  <p><a href="link1.ШТМЛ">Ссылка 1</a></p>
  <p><a href="link2.ШТМЛ">Ссылка 2</a></p>
  <p><a href="link3.ШТМЛ">Ссылка 3</a></p> 
 </body>
</html>

В данном примере псевдокласс hover применяется к ссылке (тегу <A>). Результат примера показан на рис. 1.

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

Пример 2

ШТМЛ 4.01CSS (ЦСС) 2.1IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>hover</title>
  <style type="text/CSS (ЦСС)">
   UL {
    width: 180px; /* Ширина меню */
    list-style: none; /* Для списка убираем маркеры */
    margin: 0; /* Нет отступов вокруг */
    padding: 0; /* Убираем поля вокруг контента */
    font-family: Arial, sans-serif; /* Рубленый шрифт для контента меню */
    font-size: 10pt; /* Размер названий в пункте меню */
   }
   UL LI  {
    position: relative; /* Подпункты позиционируются относительно */
   }
   LI UL {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    top: 0; /* По высоте положение подменю исходное */
    left: 179px; /* Сдвигаем подменю вправо */
    z-index: 1; /* Основное меню находится ниже подменю */
   }
   LI A {
    display: block; /* Ссылка как блочный элемент */
    width: 100%; /* Ссылка на всю ширину пункта */
    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, LI.
 
 
 
 over UL { 
    display: block; /* При выделении пункта курсором мыши отображается подменю */
   }
   .brd {
    border-bottom: 1px solid #ccc; /* Линия снизу */
   }
  </style>
 </head>
 <body>
  <ul>
   <li><a href="russian.ШТМЛ">Русская кухня</a>
    <ul> 
     <li><a href="linkr1.ШТМЛ">Бефстроганов</a></li> 
     <li><a href="linkr2.ШТМЛ">Гусь с яблоками</a></li> 
     <li><a href="linkr3.ШТМЛ">Крупеник новгородский</a></li> 
     <li><a href="linkr4.ШТМЛ">Раки по-русски</a></li> 
    </ul> 
   </li> 
   <li><a href="ukrainian.ШТМЛ">Украинская кухня</a> 
    <ul> 
     <li><a href="linku1.ШТМЛ">Вареники</a></li> 
     <li><a href="linku2.ШТМЛ">Жаркое по-харьковски</a></li> 
     <li><a href="linku3.ШТМЛ">Капустняк черниговский</a></li> 
     <li><a href="linku4.
 
 ШТМЛ">Потапцы с помидорами</a></li> 
    </ul> 
   </li>
   <li><a href="caucasus.ШТМЛ">Кавказская кухня</a> 
    <ul> 
     <li><a href="linkc1.ШТМЛ">Суп-харчо</a></li> 
     <li><a href="linkc2.ШТМЛ">Лилибдж</a></li> 
     <li><a href="linkc3.ШТМЛ">Чихиртма</a></li> 
     <li><a href="linkc4.ШТМЛ">Шашлык</a></li> 
    </ul> 
   </li> 
   <li><a href="asia.ШТМЛ">Кухня Средней Азии</a></li> 
  </ul>
 </body>
</html>

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

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

 

Примечание

В браузере Internet Эксплорер версии 6 и ниже псевдокласс hover работает только для ссылок.

CSS :hover Селектор

❮ Назад Справочник по селекторам CSS Далее ❯


Пример

Выбор и стиль ссылки при наведении на нее курсора:

a:hover {
  фоновый цвет: желтый;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Селектор :hover используется для выбора элементов при наведении на них указателя мыши.

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

Совет: Используйте селектор :link для оформления ссылок на непосещенные страницы, селектор :visited для стиля ссылки на посещаемые страницы и :active селектор для оформления активной ссылки.

Примечание: :hover ДОЛЖЕН идти после :link и :visited (если они присутствуют) в определении CSS, чтобы быть эффективным!

Версия: CSS1

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:наведение 4,0 7,0 2,0 3. 1 9,6

Примечание: В IE должен быть объявлен чтобы селектор :hover работал с другими элементами, кроме элемента .

Синтаксис CSS

:hover {
 объявления css ;
} Демонстрация

Дополнительные примеры

Пример

Выбор и стиль элемента

,

и

при наведении на него курсора:

p:hover, h2:hover, a:hover {
  background -цвет: желтый;
}

Попробуйте сами »

Пример

Выберите и стилизуйте непосещенные, посещенные, наведенные и активные ссылки:

/* непросмотренная ссылка */
a:link {
  color: green;
}

/* посещенная ссылка */
a:посетили {
  цвет: зеленый;
}

/* указатель мыши над ссылкой */
a:hover {
  color: red;
}

/* выбранная ссылка */
a:active {
  цвет: желтый;
}

Попробуйте сами »

Пример

Ссылки на разные стили:

a. ex1:hover, a.ex1:active {
  цвет: красный;
}

a.ex2:hover, a.ex2:active {
 размер шрифта: 150%;
}

Попробуйте сами »

Пример

Наведите указатель мыши на элемент , чтобы отобразить элемент

(как всплывающую подсказку):

div {
  отображение: нет;
}

span:hover + div {
  display: block;
}

Попробуйте сами »

Пример

Показать и скрыть «выпадающее» меню при наведении курсора мыши:

ul {
  display: inline;
  поля: 0;
  заполнение: 0;
}
ul li {отображение: встроенный блок;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  ширина: 200 пикселей;
  отображение: нет;
}
ул ли уль ли {
  background: #555;
  отображение: блок;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

Попробуйте сами »

Связанные страницы

CSS0 tutorial: CSS0 Links 9

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

❮ Предыдущий Справочник по селекторам CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

25 эффектов при наведении карты CSS

Коллекция бесплатных HTML и CSS примеров кода при наведении карты из Codepen, GitHub и других ресурсов. Обновление ноябрьской коллекции 2021 года. 4 новых предмета.

  1. Карты CSS
  2. Карточки блога CSS
  3. Макеты карточек CSS
  4. Флип-карточки CSS
  5. Карточки дизайна материалов CSS
  6. Карточки фильмов CSS
  7. Кредитные карты CSS
  8. Карточки продуктов CSS
  9. Карточки профилей CSS
  10. Карточки с рецептами CSS
  11. Визитные карточки CSS
О коде

Карта профиля Hover

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: font-awesome. css

О коде

Эффекты наведения карты

Отзывчивый раздел стекломорфизма с эффектами наведения карты.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Адаптивные эффекты при наведении карты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Эффект наведения карты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Адаптивный эффект наведения карты

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Карта светящегося градиента Glassmorphism

CSS3 светящиеся градиентные эффекты наведения карты Glassmorphism.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Продукт Glassmorph

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Эффекты наведения карты

Эксперименты с эффектом наведения карты в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Информационные карты CSS

информационных карточки CSS с эффектом наведения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Концепция информационных карт

Концепция информационных карточек с красивым дизайном в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: нет

Зависимости: font-awesome. css

О коде

Карточные переходы

Карточка HTML и CSS с эффектом наведения.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: font-awesome.css

О коде

Показать содержимое карты при наведении

Чистый эффект наведения карты.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: material-icons.css

О коде

Наведение карты

Эффект наведения карты с социальными иконками и формами на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: font-awesome.css

О коде

Парящие карты

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Изображение и текст Анимация только с помощью CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Эффект наведения карты

Эффект наведения карты HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Карты одинаковой высоты

Карточки одинаковой высоты с CSS flexbox и эффектом наведения.

О коде

Карточная анимация

Карточная анимация с CSS, HTML и некоторыми событиями наведения.

О коде

Карта перехода

Эффект наведения для карточки с переходом CSS .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Карточный домик

Поэкспериментируйте с классными функциями CSS, такими как настраиваемые свойства, фильтры, отсечение и … 20 эффектов наведения для карты в HTML, CSS и немного JS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: аниме. js

О коде

Эффект наведения карты

Простой эффект наведения карты в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Наведение карты

Чистый эффект наведения карты CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Карточная анимация

Небольшая анимация наведения для карточек событий.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Эффект желе в карточке при наведении

Эффект желе в карточке при наведении в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Карточка материалов с анимированным изображением

Поэкспериментируйте с дизайном материалов.

No related posts.

Автор записи

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

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