Take the 2-minute tour ×

is it possible to have a visible html element but one which lacks presence on the page?

Let me give you an example of what I mean. Lets say I have a picture gallery and a light box. Usually lightboxes grey out the background so you can focus on the image. All i want is the greyed out overlay but i dont want it to be interactive. So if you were to click on it, you would click on the element behind it. So lets say I have a paragraph and in that paragraph i have a link and covering the paragraph is a overlay at 50% opacity, if i were to hover over the link, the link would react asif the overlay was not there.

I hope I have explained this well enough

AFAIK there is no easy way to do this and the only alternative would be to get the mouse coordinates and relay them somehow :/ is ther anyway what I want is possible?


share|improve this question
one option just change the colors of your elements to a darker one, on hover to brighter. –  Ibu Jun 18 '11 at 4:47
what I plan on doing with the overlay is more complicated then a solid colour, i just used that as an example =( –  Ozzy Jun 18 '11 at 4:54
unfortunately you cant give a disabled property to a div, well at least it wont do the desired effect –  Ibu Jun 18 '11 at 4:55
add comment

4 Answers

up vote 2 down vote accepted

This can be done with pointer-events: none in certain browsers, but unfortunately not any version of IE.

share|improve this answer
I didn't know about pointer-events, thanks. Could be quite useful even though it violates the principle of separation of presentation and behavior. –  Useless Code Jun 19 '11 at 19:31
add comment

It is not possible to have an overlay be transparent in the sense you want it to be. What you could try to do is the opposite; put the 'overlay' layer behind the rest of your page and then change the opacity of your entire page to 50%. Visually this will not make any difference, but it will remove the bubbly effect of JS clicking.

share|improve this answer
If that works, you don't even need the absent element. –  harpo Jun 18 '11 at 5:49
You wouldn't need any element at all for the "underlay", just apply the style to the body and opacity to a wrapper div inside the body. –  Endophage Jun 18 '11 at 5:52
@harpo: Well, in the comment to his own post, Ozzy indicated that he wants to put put something else than a simple solid color as an 'overlay'. By simply dimming down the entire page, without putting something behind it, it will only grey out. –  Battle_707 Jun 18 '11 at 5:53
@harpo: Sorry, now I re-read your comment I noticed that you actually said something else. I don't know what it is Ozzy would like to use as an 'overlay', but yet, you are right, it might be possible to simply attach it to to the body. However, if the default layout uses this already, this might cause some serious headaches. –  Battle_707 Jun 18 '11 at 6:41
add comment

You can take an element out of the document flow with CSS but when that happens the element still receives click events as long as it is visible.

You could probably attach a click event to the overlay and then use the mouse coordinates with document.elementFromPoint or by manually looping through all the elements you want to be interactive and checking their coordinates on the page. The problem with this approach is that NoScript or a number of other products might detect this as ClickJacking, which it essentially is even though you are using it for a benign purpose.

share|improve this answer
To elaborate, your click event would have to first hide the overlay, then use document.elementFromPoint to get whatever was behind it, then show the overlay again. Otherwise document.elementFromPoint will just end up returning the overlay itself :). –  Domenic Jun 18 '11 at 6:25
@Domenic Thanks for adding that, I meant to say that myself but apparently I forgot to. –  Useless Code Jun 19 '11 at 19:22
add comment

I don't see why this isn't possible. opacity is about 5 css properties for cross-browser. I am not sure what exactly you mean by an overlay (same thing as a layer or z-index?) or are you talking about the possibility of using a css

for all p tags, then it's p:hover in css, but for a specific p tag, then you use an #id with :hover pseudo-class like this:

#myptag:hover {
    background-color: #f3c9d5;

for opacity, use a number in windows.index from 0 to 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...

well, I just realized this is only marginally helpful. while it may get your toward your goal, you may still have to set a css z-index:1; on a layerto get an actual overlay. what I just gave you was an UNDERLAY or simply setting a given p tag's color or background image to another thing. I don't know if that's desirable to you or not. I have found overlays to be extremely difficult to manage, because the page layout engine treats all the layers as if they were the same layer tags-flow-wise and you have to use absolute positioning to force them to stick in a position you want them in. plus it messes up your main page using layers.

share|improve this answer
add comment

Your Answer


