Видимый элемент HTML / CSS / JS без «присутствия»

Question

возможно ли иметь видимый HTML-элемент, но такой, который отсутствует на странице?

Позвольте мне привести вам пример того, что я имею в виду. Допустим, у меня есть картинная галерея и лайтбокс. Обычно лайтбоксы выделяют серый фон, чтобы вы могли сфокусироваться на изображении. Все, что я хочу, это серое наложение, но я не хочу, чтобы оно было интерактивным. Так что, если вы нажмете на него, вы нажмете на элемент позади него. Допустим, у меня есть абзац, и в этом абзаце у меня есть ссылка , и покрытие этого абзаца является наложением с непрозрачностью 50%. Если бы я наводил курсор на ссылку, ссылка реагировала бы, если бы наложение было не там.

Надеюсь, я объяснил это достаточно хорошо

AFAIK Нет простого способа сделать это, и единственной альтернативой было бы получить координаты мыши и как-то передать их: / В любом случае, то, что я хочу, возможно?

Спасибо

Answer 1

Это можно сделать с помощью <a href="https://developer.mozilla.org/en/css/pointer-events" rel="nofollow">pointer-events</a>: none в некоторых браузерах, но, к сожалению, не в любой версии IE.

Answer 2

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

Возможно, вы можете прикрепить событие щелчка к наложению, а затем использовать координаты мыши с помощью document.elementFromPoint или вручную зацикливая все элементы, которые вы хотите видеть интерактивными, и проверяя их координаты на странице. Проблема с этим подходом состоит в том, что NoScript или ряд других продуктов могут обнаружить это как ClickJacking , что, по сути, так и есть, даже если вы используете его в доброкачественных целях.

Answer 3

Невозможно, чтобы наложение было прозрачным в том смысле, в каком вы хотите.То, что вы могли бы попытаться сделать, это наоборот;поместите слой '1001 * наложения * позади остальной части вашей страницы, а затем измените непрозрачность всей вашей страницы до 50%.Визуально это не будет иметь никакого значения, но оно удалит пузырьковый эффект нажатия JS.

Answer 4

Я не понимаю, почему это невозможно. Непрозрачность составляет около 5 CSS-свойств для кросс-браузер. Я не уверен, что именно вы подразумеваете под оверлеем (то же самое, что слой или z-индекс?) Или вы говорите о возможности использования css

для всех тегов p, тогда это p: hover в css, но для конкретного тега p, тогда вы используете #id с псевдоклассом: hover, например:

#myptag:hover {
    background-color: #f3c9d5;
    background-image:url(/images/mybgimg.jpg);
    color:blue;
    cursor:pointer;
}

для прозрачности используйте число в windows.index от 0 до 100:

//this function modifies the opacity of an element at a 
//specific id like el1 or el2 using imageNumber as the index.
//you also specify an opacityInteger, which is an non-negative 
//integer number in the range 0..100
//works on chrome, safari, ie, and firefox, all the major browsers.
function processimage(imageNumber, opacityInteger) {
    var opacityFloat=opacityInteger/100.0;
    //set image style, if we can - I hear it's readonly...
    //filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0
    document.getElementById("el"+imageNumber).style.filter="alpha(opacity="+opacityInteger+")";
    document.getElementById("el"+imageNumber).style.mozOpacity=opacityFloat.toString();
    document.getElementById("el"+imageNumber).style.opacity=opacityFloat.toString();
}

ну, я только что понял, что это только незначительно полезно. в то время как это может привести к достижению вашей цели, вам все равно придется установить zss-индекс css: 1; на слое, чтобы получить фактическое наложение. Я только что дал вам UNDERLAY или просто установил цвет данного p-тега или фоновое изображение для другой вещи. Я не знаю, желательно это для вас или нет. Я обнаружил, что оверлеями чрезвычайно сложно управлять, потому что механизм разметки страницы обрабатывает все слои так, как если бы они были одинаковыми по тегам слоев, и вам нужно использовать абсолютное позиционирование, чтобы заставить их придерживаться той позиции, которую вы хотите. в. плюс это портит вашу главную страницу, используя слои.