Кликабельные ссылки под изображением

344

20 сентября 2017, 09:57

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

Answer 1

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

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

Answer 2

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

z-index: 1000;

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

Answer 3

Привет =)
Для решения этой проблемы вам понадобится псевдоэлемент ::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>