Geek asks and answers

Is there a hack to make a click on a click while it is still on top?

I developed a new topic out of boredom and found an idea that I really liked. It uses pseudo-elements :beforeand :afterto place two images on top of the menu bar to make it look like some animals are walking / hanging on it.

The problem that I encountered is that these elements then make the button elements under insecure. There are a few pixels at the top where, although not directly below the animal, you cannot click. The logo, which is designed to sit behind the image on the left, can only be clicked at the top where the generated block is created.

If you are confused, see jsFiddle . In this example, the logo is missing so that you can see this link behind it completely does not stick together without tabs.

Is there a workaround / hack that can make the image still display on top of all the content, but still allow clicking on it through the link? Perhaps an alternative way to add images on top so that at least the space between them is clickable?

+5
source share
2 answers

Original answer

Well, its not a completely cross-browser yet, but pointer-events: noneon these pseudo-elements you are probably really looking. Here is the violin.

Secondary response (possibly a more cross-browser)

, , , , a " " - (. ):

.pushForward {position: relative;}
.pushForward:before {
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    z-index: 1000;
}
+12

( , ) , <div> z-index, , 0. , 0 ( ), <div>, , .

, DIV , .

, , - .

+2

More articles:


All Articles