【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;
}

这种方法更适用于事件触发和相应事件元