常见的hover菜单缝隙问题
前言
经常遇到hover时显示二级菜单的需求,在这个需求中,需要注意的是鼠标经过缝隙的时候菜单会隐藏。使用transition可以在经过缝隙时仍显示菜单,但如果在缝隙停留时间超出动画时间则菜单仍会隐藏。
初级
可以用transition来解决鼠标经过缝隙时二级菜单隐藏的问题。
但transition只有零点几秒的动画时间,如果鼠标停留缝隙的时间超出动画时间则二级菜单仍会隐藏。
jcode
进阶版
可以给触发菜单的元素和二级菜单之间填充一个透明的元素,这个透明元素是二级菜单的伪元素。这样,无论鼠标停留在缝隙多久,二级菜单都不会隐藏。
jcode
总结
css博大精深!
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 河豚的前端之路!
评论