перекрывающийся div покрывает изображение и делает его недоступным для клика - PullRequest
2 голосов
/ 01 мая 2010

У меня есть div, который абсолютно позиционирован, так что я могу разместить его поверх изображения. проблема в том, что пустая часть div делает изображение под ним не кликабельным. в IE изображение по-прежнему кликабельно, но в FF или chrome его нет /

Ответы [ 3 ]

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

Добавьте position: relative; к изображению. Вот SSCCE , скопируйте и вставьте его.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2750416</title>
        <style>
            #overlap {
                position: absolute;
                width: 100%;
                height: 61px;
                background: pink;
            }
            img {
                position: relative; /* Without it, the image disappears "behind" div */
                float: right;
            }
        </style>
    </head>
    <body>
        <div id="overlap">Overlap</div>
        <img src="http://sstatic.net/so/img/logo.png" onclick="alert('Clickable!')">
    </body>
</html>
0 голосов
/ 24 июля 2013

Вы можете использовать экспериментальную функцию CSS4 pointer-events:none для вашего абсолютного элемента. Проблема с этой функцией в том, что она работает не во всех браузерах, только в Firefox и Chrome, насколько я знаю. Просто делюсь информацией :))

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

Вы не можете исправить это только через CSS. Самый простой способ - установить для события div onclick ту же функцию, что и для изображения onclick.

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