纯css实现菜单激活状态切换

摘要: 纯css实现菜单激活状态切换，当鼠标悬停菜单项时，原本激活状态的项变为普通状态，而鼠标悬停的项变为激活状态

纯css实现菜单激活状态切换，当鼠标悬停菜单项时，原本激活状态的项变为普通状态，而鼠标悬停的项变为激活状态

先看一个例子

核心代码：

.menu:hover>li.active>a{/*当鼠标悬停到整个菜单时，原本的激活项变为普通项*/
color:#f0f0f0;
background-color:transparent;
}
.menu>li.active>a,/*这个是菜单项原本的激活项*/
.menu:hover>li:hover>a{/*当鼠标悬停到菜单项时，变为激活状态*/
color:#232323;
background-color:#f0f0f0;
}

要点：

菜单项的父元素应恰好包含菜单项，不能出现空白。
例如上述例子中，ul刚好容纳所有的li，ul的宽正好等于所有li的宽的总和。

利用了.menu>li.active>a被.menu:hover>li.active>a覆盖，.menu:hover>li.active>a被.menu:hover>li:hover>a覆盖的原理