【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伪类效果。进而能控制其下面的子元素属性。