ホームページ > 記事 > ウェブフロントエンド > メニュー起動状態切り替えを実現する純CSS_html/css_WEB-ITnose
メニュー起動状態切り替えを実現する純CSS_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:47:151862ブラウズ
纯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覆盖的原理
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。