[英]Move the overlay element back and forth
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?
有什么办法吗?
tabindex="0"
to the div
s in order to make them focusabletabindex="0"
添加到div
以使其可聚焦z-index: 1;
z-index: 1;
in <selector>:hover
rule<selector>:hover
规则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.注意
tabindex="0"
,使div
不是只是为了响应鼠标单击,也能与键盘,当标签导航tabindex="0"
被使用。 They will only respond to mouse, but not to keyboard focus when you use tabindex="-1"
当您使用
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"
.现在遵循与上面相同的第二个示例,但
div
的细微差别是tabindex="-1"
而不是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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.