css3 - 关于纯用css写导航鼠标移入事件的问题?
问题描述
如何纯用css去实现下面这个效果:
一级导航的第一个导航的二级导航默认是显示的(其他导航项目的二级导航是隐藏的display:none;),当鼠标移到一级导航的其他导航项目时,默认显示的第一个二级导航隐藏,与此同时,鼠标移入的导航项的二级导航显示,这时再移开鼠标时,回到默认状态(即显示第一个导航的二级导航)
和QQ音乐导航的效果差不多求解ㅜ.ㅜ
问题解答
回答1:大概是这样HTML:<ul class='nav'> <li><ul class='subnav'>...</ul> </li> <li><ul class='subnav'>...</ul> </li> <li><ul class='subnav'>...</ul> </li></ul>CSS:
.nav li:first-child .subnav{ display: block;}.nav:hover li:first-child .subnav{ display: none;}.nav:hover li:hover .subnav{ display: block;}回答2:
感觉可以通过写ul:hover和li:hover实现你说的效果,父节点hover类似于清除子节点的状态,子节点恢复hover状态
回答3:实现细节可参考 Eric Meyer谈CSS(卷2) ,原理其实就是1楼提到的对hover的处理
回答4:其实主要问题是如何控制第一个默认显示的二级菜单的显示和隐藏对吧?可以通过给整个一级导航ul添加一个外套nav来并利用其:hover实现显示控制。手机作答不方便写代码,明天早上起来试试。
看了楼上的答案,利用第一级导航菜单的ul和li即可了。
相关文章:
1. javascript - 引入 simditor,但是显示标签,这个怎么解决。2. android - 目前有哪些用Vue.js开发移动App的方案?3. 当前访问路由未定义或不匹配,怎么解决这个问题4. 只有一条数据5. mysql - 这条sql可以怎么优化,求帮助6. defined这个实验代码我这里不对哇7. javascript - 网易云信整合到项目的流程8. php mysql_query()问题9. linux - 为公司配置服务器,要求在上面装win7的虚拟机,那我还需要装桌面环境吗?10. python - supervisor启动程序报错,ERROR (spawn error),如何查看报错具体信息