• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Исчезновение меню или текста при наведение (Ручки меню элементы исчезают при наведении курсора мыши)
Исчезновение меню или текста при наведение
Kosten
Дата: Четверг, 2019-05-23, 02:36 | Сообщение 1
Администраторы
Сообщений:22439
Награды: 56


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

Также все это создается при чистом CSS, где самостоятельно задаем прозрачность, где можно просто сделать их менее заметными, или чтоб вообще при клике все запросы пропали, кроме того, на который вы навели.Это аналогичным способом качается кнопок, где также будет материал. Вообще с начало рассмотрим как сделать красивое исчезновение ключевых запросов при наведении на один из них.

Состояния при наведении традиционно работают на элементе, на который наведен курсор, где также можем прослушивать событие hover для родительского элемента.

Первый вариант на ссылкам, что подключены ключевым словам:



HTML

Код
<div class="gresacadsa-mitopodan">
  <span>ZORNET.RU #1</span> <span>ZORNET.RU #2</span> <span>ZORNET.RU #3</span> <span>ZORNET.RU #4</span>
  <span>ZORNET.RU #5</span> <span>ZORNET.RU #6</span>
</div>

CSS

Код
span {
  padding: 0 1rem;
  transition: opacity 0.3s;
  cursor:pointer;
      font-size: 12px;
    font-weight: bold;
}
.gresacadsa-mitopodan:hover span:not(:hover) {
  opacity: 0.4;
}

Также самостоятельно оформляем под основу дизайна.

Демонстрация

Второй вариант кнопок:

Вот небольшая хитрость для того, чтобы выделять ваши состояния при наведении, а также отличный способ сделать оригинальный эффект.



HTML

Код
<div class="mugedasb-ukopitudes">
  <a href="#">ZORNET-1</a>
  <a href="#">ZORNET-2</a>
  <a href="#">ZORNET-3</a>
  <a href="#">ZORNET-4</a>
  <a href="#">ZORNET-5</a>
  <a href="#">ZORNET-6</a>
  <a href="#">ZORNET-7</a>
  <a href="#">ZORNET-8</a>
  <a href="#">ZORNET-9</a>
  <a href="#">ZORNET-10</a>
  <a href="#">ZORNET-11</a>
  <a href="#">ZORNET-12</a>
  <a href="#">ZORNET-13</a>
  <a href="#">ZORNET-14</a>
  <a href="#">ZORNET-15</a>
  <a href="#">ZORNET-16</a>
</div>

CSS

Код
.mugedasb-ukopitudes { visibility: hidden; }
.mugedasb-ukopitudes > * { visibility: visible; }
.mugedasb-ukopitudes > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
.mugedasb-ukopitudes:hover > * { opacity: 0.4; transform: scale(0.9); }
/* Fade out all items when the parent is hovered */

.mugedasb-ukopitudes > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }

html { display: flex; height: 100%; }
body {
  background: #f05555;
  padding: 10px;
  max-width: 40em;
  margin: auto;
}

.mugedasb-ukopitudes {
  display: flex;
  flex-wrap: wrap;
}

.mugedasb-ukopitudes > * {
    background: #efeded;
    padding: 1em;
    flex: auto;
    margin: 0.3em;
    text-align: center;
    color: #1e395d;
    font-size: 1.5em;
    text-decoration: none;
}

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

transition: opacity 0.2s указывает, что изменения непрозрачности будут перенесены в течение 0,2 секунд.
.sibling-fade:hover span:not(:hover) указывает, что при наведении родительского объекта выберите всех spanдочерних элементов, которые в данный момент не находятся при наведении, и измените их непрозрачность на 0.5.

Демонстрация
Прикрепления: 8570150.png(3.1 Kb) · 3470055.png(19.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Исчезновение меню или текста при наведение (Ручки меню элементы исчезают при наведении курсора мыши)
  • Страница 1 из 1
  • 1
Поиск: