Как сделать, чтобы ссылки работали при наведении, если стоит под ними другой блок?

Ссылка скопирована
CSS HTML PHP
1 ответ

Как сделать, чтобы родительский блок не видел ниже стоящий? Из-за того, что прям под списком находится другой текст, не работают ссылки при наведении мышкой. А в другую сторону убрать не могу.

код

<footer>               <div class="item">         <ul class="fotbar-nav">              <li class="nav_item"><a class="nav_link" href="index.html">Главная</a></li>              <li class="nav_item"><a class="nav_link" href="index.html">Библиотека</a></li>              <li class="nav_item"><a class="nav_link" href="#">Источники</a></li>          </ul>      </div>       <div class="copyright">      <p class="end_foot">©2023 Minerals</p>      </div>     </footer>

<footer> <div class="item"> <ul class="fotbar-nav"> <li class="nav_item"><a class="nav_link" href="index.html">Главная</a></li> <li class="nav_item"><a class="nav_link" href="index.html">Библиотека</a></li> <li class="nav_item"><a class="nav_link" href="#">Источники</a></li> </ul> </div> <div class="copyright"> <p class="end_foot">©2023 Minerals</p> </div> </footer>

.fotbar-nav{          text-align: justify;          font-size: 130%;         width: auto;      }           ul{         float: left;             }          .nav_item{         margin-inline: 5px;         display: inline-block;     }               .nav_link{         color: #FFF;         text-align: center;     }          .copyright{         position: absolute;         padding-top: 3.8%;        padding-left: 44%;          }          .end_foot{         position: relative;          text-align: center;         color: #FFF;     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;     font-size: 15px;     font-style: normal;     font-weight: 400;     line-height: normal;     }

.fotbar-nav{ text-align: justify; font-size: 130%; width: auto; } ul{ float: left; } .nav_item{ margin-inline: 5px; display: inline-block; } .nav_link{ color: #FFF; text-align: center; } .copyright{ position: absolute; padding-top: 3.8%; padding-left: 44%; } .end_foot{ position: relative; text-align: center; color: #FFF; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }

Дополнительно:

Сделать-то не вопрос. С помощью pointer-events.

Но вам это не нужно скорее всего.

Сначала нужно узнать зачем вы используете float и зачем нижнему блоку абсолют.
Если избавится и от того и от другого, то и костыли не понадобятся.

Ответы:

.fotbar-nav {   font-size: 130%; } ul {   display: flex;   list-style: none;   gap: 10px; } .nav_link {   color: #fff; } .end_foot {   text-align: center;   color: #fff;   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;   font-size: 15px;   font-style: normal;   font-weight: 400;   line-height: normal; }

.fotbar-nav { font-size: 130%; } ul { display: flex; list-style: none; gap: 10px; } .nav_link { color: #fff; } .end_foot { text-align: center; color: #fff; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; }

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Максим Павлов Ответ

Для того чтобы сделать ссылки активными при наведении, даже если под ними находится другой блок, можно использовать псевдоэлемент ::before или ::after.

Вот пример кода на CSS, который позволит сделать ссылки активными при наведении:

.link-container {
  position: relative;
}
 
.link-container::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
 
.link-container a {
  position: relative;
  z-index: 1;
  color: blue;
}
 
.link-container a:hover {
  text-decoration: underline;
}

.link-container { position: relative; } .link-container::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .link-container a { position: relative; z-index: 1; color: blue; } .link-container a:hover { text-decoration: underline; }

В данном примере мы используем псевдоэлемент ::before чтобы создать невидимый слой над ссылкой, который будет реагировать на наведение. Затем мы устанавливаем z-index для ссылки, чтобы она оставалась видимой над псевдоэлементом. При наведении на ссылку мы делаем ее подчеркнутой.

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

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

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Figma Баг с переносом слов в Figma? 1 ответ