1

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

1
  • Добавьте код к вашему вопросу
    – Denisoed
    19 сен 2017 в 4:40

3 ответа 3

1

Ответ нашел сам: в CSS-свойствах верхнего изображения прописать pointer-events: none;

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

0

они у тя снизу просто остались, то что должно быть скикабельным, добавь ему

z-index: 1000;

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

4
  • и перед эти position:relative;
    – Goldy
    19 сен 2017 в 4:04
  • Такой вариант не подходит, т.к. относительно главного (основного) фона, ссылки потеряют цвет и станут менее читаемы. Сам нашел ответ: изображению верхнему добавить pointer-events: none;
    – Denis
    19 сен 2017 в 4:06
  • надо просто подобрать цвет, это легче, чем строить костыли...
    – Air
    19 сен 2017 в 4:07
  • не написал о цветах, зная, просто подумал что сообразил бы уж... легче подобрать цвет...
    – Air
    19 сен 2017 в 4:08
0

Привет =)
Для решения этой проблемы вам понадобится псевдоэлемент ::before.

.menu{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 15px;
  border: 2px solid green;
  position: relative;
}

.menu::before{
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('https://www.w3schools.com/css/img_fjords.jpg');
  background-size: cover;
  background-position: center;
}
.menu a{
  margin-right: 8px;
  color: black;
  z-index: 1;
}

.menu a:hover{
  color: red;
}
<div class="menu">
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.