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

Question

SereneSorceress

css , html

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

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

8 декабря 2023 г. 19:18

Ответы на вопрос 2

Похожие вопросы

Answer 1

Если вы не можете изменить порядок блоков, можно использовать свойство CSS `pointer-events` с значением `none` для текста, находящегося ниже списка. Это позволит обойти его и активировать наведение на ссылки.

Пример кода:

HTML:
```html
<div class="parent">
  <ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    <li><a href="#">Ссылка 3</a></li>
  </ul>
</div>

<div class="text">Нижестоящий текст</div>
```

CSS:
```css
.parent {
  position: relative; /* Убедитесь, что родительский блок имеет позицию */
}

.text {
  pointer-events: none; /* Блок текста не будет перехватывать события мыши */
}
```

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

Answer 2

<pre><code class="css">.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;
}</code></pre>