纯css实现菜单激活状态切换_html/css_WEB-ITnose

WBOY
發布: 2016-06-21 08:47:15
原創
1900 人瀏覽過

纯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覆盖的原理
登入後複製

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板