來回移動覆蓋元素

Question

我有兩個元素（主要和底部），底部覆蓋在另一個具有透明度的元素上。

 <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>

當元素中間聚焦時，我希望元素底部以透明方式返回，當底部聚焦時，元素中間返回，底部向前。 有什么辦法嗎？

Answer 1

1. 您需要將tabindex="0"添加到div以使其可聚焦
2. 設置z-index: 1; 在<selector>:hover規則

像這樣：

.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>

---

注意tabindex="0" ，使div不是只是為了響應鼠標單擊，也能與鍵盤，當標簽導航tabindex="0"被使用。 當您使用tabindex="-1"時，它們只會響應鼠標，而不會響應鍵盤焦點

現在遵循與上面相同的第二個示例，但div的細微差別是tabindex="-1"而不是tabindex="0" 。 請注意，您無法通過鍵盤聚焦它們（但您可以使用鍵盤取消聚焦）

 .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>