光標樣式忽略：重點以創建CSS切換

Question

這OP知道，一個簡單的JavaScript click事件將很容易足以作爲替代這裏CSS ....但是好奇心渴望得到滿足：

使用:focus僞類可以讓僞指令在激活時顯示pointer遊標？看一看。

body { 
 
    font-family: sans-serif; 
 
} 
 
div { 
 
    cursor: pointer; /* div should *Always* have a pointer cursor */ 
 
    width: 10rem; 
 
    height: 10rem; 
 
    background-color: #0dd; 
 
    transition-property: background-color; 
 
    transition-duration: 1s; 
 
} 
 
div:focus { /* Apply this only when div is focused/clicked */ 
 
    pointer-events: none; /* pointer-events disabled to allow toggle */ 
 
    background-color: #ee0; 
 
    outline: 0; 
 
}

<div tabindex="0"></div> <!-- tabindex allows div to be focused --> 
 
Please click the square<br>above. Again.

注意當DIV是黃色的指針光標更改回其默認的鼠標指針行爲？（移動鼠標非常輕微，如果事實並非如此）

我想防止光標改變。我希望光標始終保持在pointer狀態。

當div被點擊時觸發一個事件，但是同樣的按鈕不能被點擊或者重新聚焦似乎。所以點擊黃色div不會觸發事件恢復爲藍色，除非我們以某種方式欺騙瀏覽器認爲非常相同的點擊空間是外部 div以外的區域。這就是爲什麼pointer-events: none行存在。因此，切換可以一次又一次地激活，如切換應該。

我唯一的願望是以某種方式將指針光標保持在黃色div而不改變它的切換行爲。這可能是不可能的pointer-events: none但有沒有辦法做到這一點？某種類型的解決方法或破解？

Answer 1

你問的答案：

body { 
    font-family: sans-serif; 
} 
#wrap { 
    position: relative; 
    width: 10rem; 
    height: 10rem; 
} 
#top { 
    cursor: pointer; /* div should *Always* have a pointer cursor */ 
    background-color: #0dd; 
    transition-property: background-color; 
    transition-duration: 1s; 
    position: relative; 
    z-index: 100; 
    position: absolute; 
    width: 10rem; 
    height: 10rem; 
} 
#top:focus { /* Apply this only when div is focused */ 
    pointer-events: none; /* pointer-events disabled to allow toggle */ 
    background-color: #ee0; 
    outline: 0; 
} 
#top:focus + #bottom { 
    pointer-events: all; 
} 
#bottom { 
    position: absolute; 
    background: #f00; 
    pointer-events: none; 
    opacity: 0; 
    cursor: pointer; 
    height: 10rem; 
    width: 10rem; 
} 

HTML

<div tabindex="0" id="top"></div> 
<div id="bottom" tabindex="0"> 
</div> 
<!-- tabindex allows div to be focused --> 
Please click the square<br>above. Again.