Clever Geek Handbook

Creating an absolute arc?

My current dilemma is that I have an absolute position on top of all my code (it has a sliding animation), but now I cannot access the content behind the top div.

This animation has no links or buttons: http://oxygenrad.io/index.php

This is without the animated div and has working links and buttons: http://oxygenrad.io/index-2.php

The div causing all my problems is the following:

<div class="reveal open">
</div>

I realize that I could just destroy the div after: XX seconds, but ideally I was wondering if there was a better solution? All I want to do is click on the div.

+3


source to share


3 answers


Use pointer-events: none;

in your div like this:

.opened {
  background: url(http://uploadir.com/u/9btuxs9t) 0px 660px, url(http://uploadir.com/u/9btuxs9t) 0px -735px;
  pointer-events: none;
  background-repeat: no-repeat;
}

The pointer-events property allows you to control how HTML elements react to mouse / touch events - including CSS hover / active states, Javascript click / tap events, and cursor visibility.



For IE11, you can use:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
+4


source


You can try with pointer-events: none

(see mdn for details ). But keep in mind that won't work with IE <11 .



+3


source


Instead pointer-events: none;

, as some have suggested, just add z-index:0;

to your class .opened

. Works in all outdated browsers, while pointer-events

not.

+2


source






More articles:


All Articles