Перейдите через div к базовым элементам

Question

У меня есть div, который имеет background:transparent вместе с border.Под этим div у меня есть больше элементов.

В настоящее время я могу щелкнуть нижележащие элементы, когда нажимаю за пределами оверлея div.Однако я не могу щелкнуть по основным элементам, когда щелкаю непосредственно по оверлею div.

Я хочу, чтобы можно было щелкнуть по этому div, чтобы я мог нажимать на базовые элементы.

Answer 1

Просто оберните a тег вокруг всего фрагмента HTML, например

<a href="/categories/1">
  <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
  <div class="caption bg-orange">
    <h2>
      test1
    </h2>
  </div>
</a>

в моем примере мой класс титров имеет эффекты при наведении, что при событиях указателя: нет; вы просто потеряете

Обтекание содержимого сохранит ваши эффекты при наведении, и вы можете нажать на все изображение, включая div, regards!

Answer 2

Я думаю, что вы можете рассмотреть возможность изменения вашей разметки. Если я не ошибаюсь, вы хотите поместить невидимый слой над документом, и ваша невидимая разметка может предшествовать изображению вашего документа (это правильно?).

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

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

Элемент абсолютной позиции позиционируется относительно первого родителя. элемент, который имеет положение, отличное от статического. Если такой элемент не найден, содержащийся блок имеет вид html

Надеюсь, это поможет. См. здесь для получения дополнительной информации о позиционировании CSS.

Answer 3

Вы можете разместить наложение AP как ...

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

<div id="overlay"></div>

просто положи его туда, куда ты не хочешь, т.е. нажми. Работает во всех.

Answer 4

Более простым способом было бы встроить прозрачное фоновое изображение, используя URI данных, следующим образом:

.click-through {
    pointer-events: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

Answer 5

Я думаю, что event.stopPropagation(); следует упомянуть и здесь.Добавьте это к функции Click вашей кнопки.

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