先放上我们最终实现的效果
注:这里建议插入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伪类效果。进而能控制其下面的子元素属性。