Move the overlay element back and forth

Question

I have two elements (main and bottom) and the bottom is overlaid on another with transparency.

 <div class="middle" style="background:rgba(0,0,0,0.3); position:absolute; width:250px; height:300px;">This is middle part</div> <div class="bottom" style="background:rgba(0,0,0,0.3); position:absolute; bottom:250px; width:150px; height:200px;" ">This is bottom part</div>

When the element middle is focused, I want the element bottom to go back with transparency and when the bottom is focused, then the element middle to go back and bottom to be forward. is there any way?

Answer 1

1. You need to add tabindex="0" to the div s in order to make them focusable
2. Set z-index: 1; in <selector>:hover rule

Like this:

.middle { color: white; background: blue; position: absolute; width: 250px; height: 300px; left: 50px; } .middle:focus { outline: 1px solid pink; z-index: 1; } .bottom { background: red; color: black; position: absolute; top: 50px; width: 150px; height: 200px; } .bottom:focus { outline: 1px solid lightblue; z-index: 1; }

 <div tabindex="0" class="middle">This is middle part</div> <div tabindex="0" class="bottom">This is bottom part</div>

---

Note that tabindex="0" makes the div s not only respond to mouse click, but also to tab navigation with the keyboard, when tabindex="0" is used. They will only respond to mouse, but not to keyboard focus when you use tabindex="-1"

Now follows a second example which is the same as above with the slight difference of the div s having tabindex="-1" instead of tabindex="0" . Note that you cannot keyboard focus them (but you can unfocus them with the keyboard)

 .middle { color: white; background: blue; position: absolute; width: 250px; height: 300px; left: 50px; } .middle:focus { outline: 1px solid pink; z-index: 1; } .bottom { background: red; color: black; position: absolute; top: 50px; width: 150px; height: 200px; } .bottom:focus { outline: 1px solid lightblue; z-index: 1; }

 <div tabindex="-1" class="middle">This is middle part</div> <div tabindex="-1" class="bottom">This is bottom part</div>