Ссылка с использованием z-index не может быть нажата, даже если она сверху, как в Firefox, так и в IE - PullRequest
Новая
       0

Ссылка с использованием z-index не может быть нажата, даже если она сверху, как в Firefox, так и в IE

26 голосов
/ 30 августа 2011

Я пытаюсь заставить текстовую ссылку появляться сверху частично прозрачного изображения, которое, в свою очередь, находится поверх простого цветного фона.Я хочу, чтобы при печати страницы печатался текст ссылки и изображение, но не цветной фон.(Именно поэтому я не использую свойство background-image )

Проблема заключается в том, что хотя ссылка появляется в верхней части изображения, а изображение появляется в верхней части фонапо желанию, ссылка не может быть нажата.Мне кажется, что если ссылка появляется сверху, то она должна быть восприимчивой к событиям мыши ...

Это происходит по крайней мере в следующих браузерах: Firefox 6.0 (Windows + Linux), Firefox 3.6 (Windows)и Internet Explorer 7.

Пожалуйста, кто-нибудь скажет мне, если это проблема с моим HTML / CSS или с браузерами?

Вот некоторый HTML-код для демонстрации проблемы: 

<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  

      <a style="padding:50px; color:#fff;z-index:0;" href="#">Can you click me?</a>

    </div>

  </body>

</html>

Приветствия!

Alex

Ответы [ 4 ]

55 голосов
/ 30 августа 2011

Проблема в основном вызвана использованием отрицательных значений z-index, которые, кажется, заставляют родительский div захватывать события мыши.Используйте положительные индексы и назначьте ссылку position:relative для получения ожидаемого поведения, потому что без явного позиционирования z-index ничего не сделает.

6 голосов
/ 19 января 2017

В моем случае я имел дело с некоторыми необъясненными указателями-событиями в CSS (в частности, значением all), которые заставили некоторые элементы перехватывать события, явно вызванные другим (не предком!)часть DOM.

Я удалил все pointer-events из CSS.

Я знаю, что на этот вопрос уже есть принятый ответ, но мои симптомы соответствуют ОП, поэтому, возможно, мой совет может помочьбудущий борец, как я.

4 голосов
/ 30 августа 2011

Две ноты:

1) Атрибут z-index можно использовать только для позиционированных элементов (абсолютных, относительных или фиксированных). Ваш элемент не.

2) [Отредактировано: не связано] Ваш верхний элемент (с z-index: 0) находится внутри вашего фонового элемента (с z-index: -2).

На следующих работах вы можете поиграть с ним по адресу: http://jsfiddle.net/5MpFn/

<html>

  <head>         

    <title>Test</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  </head>

  <body>                               

    <div style="position: relative;z-index: -2; background-color:#333; height:200px;">

      <img style="position: absolute;top: 0;left: 0;z-index: -1;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/280px-PNG_transparency_demonstration_1.png" alt="Dice" />  



    </div>

      <div style="position: absolute; top: 0;left: 0; padding:50px; z-index:0;" >
      <a href="#" style="color:#fff;">Can you click me?</a>      
      </div>

  </body>

</html>
1 голос
/ 24 сентября 2018

Ни одно из вышеприведенных решений не сработало для моей конкретной проблемы.Я бы рекомендовал сначала использовать вышеуказанные решения, и если это не сработает, установите события указателя на none (не работает для IE <= 10).</p> 

.some-horizontal-container {
  pointer-events: none;
}

Вы также можете использовать visibility: hidden для div, который перекрывает кликабельный элемент под ним.

Пожалуйста, ознакомьтесь с этой статьей для более подробной информации: https://blog.lysender.com/2014/09/css-elements-covered-by-a-container-div-not-clickable/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...