关于纯用css写导航鼠标移入事件的问题？-PHP中文网问答

关于纯用css写导航鼠标移入事件的问题？

高洛峰 2016-10-26 14:48:49

[CSS讨论组]

1612

如何纯用css去实现下面这个效果：

一级导航的第一个导航的二级导航默认是显示的（其他导航项目的二级导航是隐藏的display：none；），
当鼠标移到一级导航的其他导航项目时，默认显示的第一个二级导航隐藏，
与此同时，鼠标移入的导航项的二级导航显示，这时再移开鼠标时，回到默认状态（即显示第一个导航的二级导航）

和QQ音乐导航的效果差不多求解ㅜ.ㅜ

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(1)

三叔2016-10-26 14:50:33 1楼

大概是这样

HTML:

CSS：

.nav li:first-child .subnav{
    display: block;
}
.nav:hover li:first-child .subnav{
    display: none;
}
.nav:hover li:hover .subnav{
    display: block;
}

赞 +0

添加回复