Есть ли способ, чтобы элемент позади div (ссылки) можно было кликать в областях, где div "прозрачный" - PullRequest
Новая
       2

Есть ли способ, чтобы элемент позади div (ссылки) можно было кликать в областях, где div "прозрачный"

0 голосов
/ 01 мая 2010

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

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

Проблема возникает только тогда, когда отступ покрывает div. Но если я просто полагаюсь на поле, браузер игнорирует нижнее поле, поэтому прокрутка не поднимается достаточно высоко. Чтобы решить эту проблему, я прибегаю к прокладке внизу. Это проблема.

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

Пример проблемы: 

<!DOCTYPE html>
<html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <style>
      #top, #bottom {
        position: fixed;
        border: 1 px solid #333;
        background-color: #eee;
        left: 100px;
        padding: 8px;
      }
      #top {
        top: 0;
        z-index: 1;
      }
      #bottom {
        bottom: 0;
        z-index: 2;
      }
      #contentWrapper {
        position: absolute;
        margin: 100px 0 0 0;
        /* Padding is used to make sure the scroll goes up further on the page */
        padding: 0 0 100px 0;
        width: 600px;
        z-index: 3;
      }

      #content {
        border: 1 px solid #333;
        background-color: #eee;
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <div id='top'><a href="#">Top link</a></div>
    <div id='bottom'><a href="#">Bottom link</a></div>
    <div id='contentWrapper'>
      <div id='content'>Some content</div>
    </div>
  </body>
</html>

Ответы [ 3 ]

1 голос
/ 01 мая 2010

Проблема в ваших дополнениях. Ссылка вверху по-прежнему кликабельна, потому что margin в вашем контенте смещает ее, что означает, что ваш элемент больше не покрывает вашу ссылку, когда пользователь прокрутил до нужного места. С padding-bottom элемент расширяется, и элемент закрывает ссылки внизу. Поэтому при рассмотрении проблемы найдено решение: как расширить область, на которую можно прокрутить страницу, без использования #contentWrapper?

Вот одно решение, которое работает независимо от высоты вашего контента : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style>
    #top, #bottom {
        position: fixed;
        background-color: #00F;
        left: 100px;
        padding: 8px;
    }
    #top {
        top: 0;
    }
    #bottom {
        bottom: 0;
    }
    #contentWrapper {
        position: absolute;
        margin: 100px 0 0 0;
        width: 600px;
        z-index: 10000;
        overflow: visible;
    }
    #heightFix {
        position: absolute;
        bottom: -100px;
        height: 0;
        overflow: hidden;
        font-size: 0;
    }

    #content {
        background-color: #F00;
        height: 1000px;
    }
    </style>
  </head>
  <body>
    <div id="top"><a href="#">Top link</a></div>
    <div id="bottom"><a href="#">Bottom link</a></div>
    <div id="contentWrapper">
      <div id="heightFix"></div>
      <div id="content">Some content</div>
    </div>
  </body>
</html>
0 голосов
/ 01 мая 2010

Попробуйте сделать покрытие div как можно меньше.

Или, более конкретно, если «чистые» секции имеют «квадратную» форму, чем, возможно, вы могли бы вместо этого создать плавающую область из нескольких меньших элементов. Это сделало бы «прозрачные» области фактически «свободными», поэтому ссылки в этих областях будут активными.

Не думаю, что можно сделать ссылки кликабельными через div любым другим способом?

0 голосов
/ 01 мая 2010

Насколько я знаю, единственный способ сделать это - обработать события на покрытии <div> и использовать координаты мыши в событии, чтобы выяснить, какую ссылку вызывать. Мне неудобно даже думать об этом, но это возможно. Задолго до того, как я попытался это сделать, я усердно работал над тем, чтобы придумать лучший способ позиционирования верхнего слоя, чтобы заполнение не было необходимым.

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

Нет похожих вопросов

...