【CSS-進階之元素：focus偽類模擬點擊事件】

先放上我們最終實現的效果

注：這里建議插入codepen(臨時使用圖片代替)

我們想要實現當點擊某個元素時，顯示一個tip浮動框。

html:

<div class="wrapper">
    <span class="click-ele">我是按鈕</span>
    <div class="popup">我是文字測試君</div>
</div>

通常我們會采用JS的方法給觸發事件元素監聽click事件監聽，然后手動顯示隱藏。

這里我們用CSS來模擬hover事件：

:active + 兄弟選擇器(加號+)

首先想到的是使用偽類的方法:active，他和相鄰兄弟選擇器(加好+)一起使用。

<div class="wrapper">
    <span class="click-ele">我是按鈕</span>
    <div class="popup">我是文字測試君</div>
</div>
.popup{
    display:none;
}
.click-ele:active + div.popup{
    display: block;
}

這種方法更適用於事件觸發和相應事件元素屬於兄弟元素的場景。並且模擬的是hover事件並不是點擊事件，因為當我們鼠標按鈕放開后tip彈框立即消失了。

方法二 :focus偽類和事件冒泡

通過:focus屬性可以直接實現點擊事件效果

<div class="wrapper">
    <span class="click-ele">我是按鈕</span>
    <div class="popup">我是文字測試君</div>
</div>
.wrapper:focus .popup{
    display: block;
}
.popup{
    display:none;
}

這里利用的是事件冒泡原理。當按鈕被點擊時，觸發了focus事件。事件往上傳播到父元素.wrapper。因此觸發了它的:focus偽類效果。進而能控制其下面的子元素屬性。