Как я могу разрешить указателям-событиям проходить через элементы, не отключая их?

Итак, у меня есть целый элемент списка, который я хочу сделать кликабельным, но внутри него есть ссылки, которые также должны быть интерактивными. Оказывается, вы не можете вкладывать <a> теги, поэтому вместо этого я создал элемент списка и <a> братьев и сестер и расположил их так, чтобы они перекрывались.

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

Теперь проблема в том, что при наведении курсора на ссылку в листинге фоновое наведение перестает срабатывать.

Мне бы хотелось, чтобы при наведении курсора на ссылку внутри контейнера отображалась ссылка (и href отображался внизу), но ссылка ниже по-прежнему отображалась в состоянии наведения.

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

#listlink {
  height: 100px; width: 100px; top:0; left:0;
  position: absolute;

  background: rgba(255,0,0,0.4);
}

#listlink:hover {  background: rgba(255,0,0,0.8);}

#listitem {
  height: 100px; width: 100px; top:0; left:0;
  position: absolute;
  
  z-index: 10;
  pointer-events: none;
}

#childlink {
  background: rgba(0,0,255,0.4);
  pointer-events: auto;
}
#childlink:hover {  background: rgba(0,0,255,0.8);}
<a id="listlink" href="#listlink"></a>
<div id="listitem">
  Text <a id="childlink" href="#childlink">top link</a> text
</div>


html css hyperlink anchor pointer-events
person stackers    schedule 04.03.2018    source источник
comment
Это:#listitem { background: rgba(255, 0, 0, 0.4); } #listitem:hover { background: rgba(255, 0, 0, 0.8); } #childlink { background: rgba(0, 0, 255, 0.4); } #childlink:hover { background: rgba(0, 0, 255, 0.8); } кажется, делает работу без вашего дополнительного <a>   -  person G-Cyrillus    schedule 04.03.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вместо этого для достижения требуемого поведения вы можете поместить все в контейнер relative с фиксированными width и height, как показано. И применить к нему hoverэффект, чем #listlink.

.container {
  position: relative;
  height: 100px;
  width: 100px;
  background: rgba(255, 0, 0, 0.4);
}
.container:hover {
  background: rgba(255, 0, 0, 0.8);
}
#listlink {
 /* height: 100px;
  width: 100px;*/
  top: 0;
  bottom:0;
  left: 0;
  right:0;
  position: absolute;
  /*background: rgba(255, 0, 0, 0.4);*/
}
/*
#listlink:hover {
  background: rgba(255, 0, 0, 0.8);
}*/

#listitem {
  /* height: 100px;
  width: 100px;*/
  top: 0;
  bottom:0;
  left: 0;
  right:0;
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

#childlink {
  background: rgba(0, 0, 255, 0.4);
  pointer-events: auto;
}

#childlink:hover {
  background: rgba(0, 0, 255, 0.8);
}
<div class='container'>
  <a id="listlink" href="#listlink"></a>
  <div id="listitem">
    Text <a id="childlink" href="#childlink">top link</a> text
  </div>
</div>

person whitehat    schedule 04.03.2018
comment
Да, это работает, у меня даже уже был контейнер, поэтому я просто переместил курсор с фоновой ссылки на контейнер, и все заработало отлично. - person stackers; 04.03.2018