0

I am working on an interactive graphic with pure HTML/CSS for my company. No JavaScript allowed.
My problem is: I have three divs, one in the front, and two behind that. The div in front is supposed to turn invisible when focused. The two divs in the back are supposed to link to other pages, but the links are not working, because everytime you click on, the top element becomes unfocused again, and covers them up.
This is my code, and I also built a fiddle simulating the problem: http://jsfiddle.net/kj8Us/

HTML 

<div class="front" tabindex="0">
Click me please!
</div>
<a href="www.google.com">
    <div class="back green"></div>
</a>
<a href="www.yahoo.com">
    <div class="back blue"></div>
</a>

CSS 

.front{ 
    height:150px;
    width:150px;
    position:absolute;
    z-index: 100;
    background: rgba(243, 146, 0, 0.5);
    border: 5px solid #F39200; }
.back{
    height:100px;
    width:100px;
    position:realtive;
    z-index:0;
}
.green{
    background:green;
}
.blue{
    background:blue;
}
div.front:focus{
  opacity:0;
  margin:-100px -100px;
  -webkit-transition: margin:2s;
  -webkit-transition: opacity: 0.5s;
}
.back:hover{
    width:200px;
}

The questions kind of similar to this, that I found were:

accessing divs behind other divs
Child div behind parent div, how to fix link?
Clickable divs beneath transparent div
but it didn't really help, because they didn't exactly fit my context...

So, the questions is: How can I make the links work?

Hoping you can help me...Thanks!
deadfishli

Community
  • 1
  • 1
deadfishli
  • 729
  • 5
  • 17

1 Answers1

0

If CSS3 is allowed for your website, then using a transition delay could solve your issue. Basically, set the transition delay when focusing to zero seconds (it will hide instantly) and set the transition delay when unfocusing to a larger amount of seconds (it will wait to unhide which should give enough time for the link to be clicked).

This is very awkward usage of CSS, and I personally would be using JavaScript for this... But sometimes you just can't live in a perfect world. :/

CSS:

.front {
    transition-delay: 100000s;
    -webkit-transition-delay: 100000s;
}

div.front:focus{
    transition-delay: 0s;
    -webkit-transition-delay: 0s;
}

JSFiddle here.

jsea
  • 3,859
  • 1
  • 17
  • 21
  • 1
    Oh my, I would never have thought of that. And yes, it's awkward, but it's working like a charm. Thank you so much! – deadfishli Sep 29 '13 at 09:10