前言

经常遇到hover时显示二级菜单的需求,在这个需求中,需要注意的是鼠标经过缝隙的时候菜单会隐藏。使用transition可以在经过缝隙时仍显示菜单,但如果在缝隙停留时间超出动画时间则菜单仍会隐藏。

初级

可以用transition来解决鼠标经过缝隙时二级菜单隐藏的问题。
但transition只有零点几秒的动画时间,如果鼠标停留缝隙的时间超出动画时间则二级菜单仍会隐藏。
jcode

进阶版

可以给触发菜单的元素和二级菜单之间填充一个透明的元素,这个透明元素是二级菜单的伪元素。这样,无论鼠标停留在缝隙多久,二级菜单都不会隐藏。
jcode

总结

css博大精深!