纯css实现菜单激活状态切换_html/css_WEB-ITnose
程序员文章站
2022-06-13 16:15:05
...
纯css实现菜单激活状态切换,当鼠标悬停菜单项时,原本激活状态的项变为普通状态,而鼠标悬停的项变为激活状态先看一个[例子](http://runjs.cn/detail/q3qcxwgw)核心代码:```.menu:hover>li.active>a{/*当鼠标悬停到整个菜单时,原本的激活项变为普通项*/ color:#f0f0f0; background-color:transparent;}.menu>li.active>a,/*这个是菜单项原本的激活项*/.menu:hover>li:hover>a{/*当鼠标悬停到菜单项时,变为激活状态*/ color:#232323; background-color:#f0f0f0;}```要点:1. 菜单项的父元素应恰好包含菜单项,不能出现空白。例如上述例子中,ul刚好容纳所有的li,ul的宽正好等于所有li的宽的总和。2. 利用了.menu>li.active>a被.menu:hover>li.active>a覆盖,.menu:hover>li.active>a被.menu:hover>li:hover>a覆盖的原理
上一篇: 【Keepalived 介绍】
推荐阅读
-
纯CSS3单页切换导航菜单界面设计的简单实现
-
纯CSS实现点击事件展现隐藏div菜单列表/元素切换
-
HTML5之纯CSS3实现的tab标签切换
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
简单的单级下拉菜单实现_html/css_WEB-ITnose
-
js实现图片切换效果_html/css_WEB-ITnose
-
纯CSS实现面包屑式导航_html/css_WEB-ITnose