CSS下拉菜单是网页常用的交互方式,但是有时候我们会遇到下拉菜单离开后却没有消失的问题。这种情况通常是由于选用了错误的CSS选择器造成的。在下拉菜单的CSS代码中,我们需要通过:hover选择器来定义
CSS下拉菜单是网页常用的交互方式,但是有时候我们会遇到下拉菜单离开后却没有消失的问题。
这种情况通常是由于选用了错误的CSS选择器造成的。在下拉菜单的CSS代码中,我们需要通过:hover选择器来定义当鼠标悬浮在菜单上时的样式,如下:
.dropdown:hover .dropdown-menu { display: block; }
这里的.dropdown:hover表示只有当鼠标悬浮在.dropdown元素上时,才会对其后代元素.dropdown-menu生效,使其显示出来。但是,如果我们在.dropdown-menu元素的样式代码里也使用了:hover选择器,导致在菜单上滑动鼠标时并不能使菜单消失,代码如下:
.dropdown-menu:hover { display: block; }
为了解决这个问题,我们只需要去掉.dropdown-menu:hover的CSS代码,或者将其改成其他选择器,如下:
.dropdown-menu.visible { display: block; }
这样当我们需要在JavaScript中操作下拉菜单时,只需要添加/删除.visible类名即可控制下拉菜单的显隐。
粉丝
0
关注
0
收藏
0