ホームページ >ウェブフロントエンド >htmlチュートリアル >ホバーでサブメニューを表示させたのですが、反応がなくて本当に困りました！ _html/css_WEB-ITnose
ホバーでサブメニューを表示させたのですが、反応がなくて本当に困りました！ _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:09:571600ブラウズ
<body> <div id='menu'> <ul> <li class='interval'>|</li> <li><a href="index.html">XXXXXXXX</a></li> <li class='interval'>|</li> <li> <a href="#">鼠标飘过显示子菜单</a> <div id='submenu'> <div class='subitemleft'><a href="1.html">- xxxxxxxx -</a></div> <div class='subitemright'><a href="2.html">- xxxxxxxx -</a></div> <div class='subitemleft'><a href="3.html">- xxxxxxxxx -</a></div> <div class='subitemright'><a href="4.html">- xxxxxxxxxx -</a></div> </div> </li> <li class='interval'>|</li> <li><a href="topic.html">XXXXXXXX</a></li> <li class='interval'>|</li> <li><a href="team.html">XXXXXXXX</a></li> <li class='interval'>|</li> <li><a href="cooperation.html">XXXXXXXX</a></li> <li class='interval'>|</li> <li><a href="product.html">XXXXXXXX</a></li> <li class='interval'>|</li> <li><a href="passenger.html">XXXXXXXXX</a></li> <li class='interval'>|</li> <li><a href="contact.html">XXXXXXXX</a></li> <li class='interval'>|</li> </ul> </div></body>
CSS:
#menu ul{ margin:0 auto; position:absolute; /*background:#00FF00;*/ list-style:none; padding:0px; height:26px; line-height:26px;}#menu ul li{ float:left; padding:0px; height:26px; line-height:26px;}#menu ul li a { color:#7777CC; display:block; padding:0px 27px; height:26px; line-height:26px; float:left; text-decoration:none;}#menu ul li a:hover { background:#7777CC; color:#FFF;}#menu ul li a.rd:hover .submenu{ visibility:visible;}#menu #submenu { position:absolute; padding:0px; float:left; top:26px; width:600px; height:54px; background-color:#7777CC; visibility:hidden;}/*如代码所示，a{display:none;} a:hover{display:block;}以及 a{visibility:hidden;} a:hover{visibility:visible;}都试过了，但是不知是选择的元素不对还是怎么样，没效果*/ 助けてください!
ディスカッション (解決策) への返信
テーブルシェン。 。 。 ='間隔'>|bed06894275b65c1ab86501b08a632eb
ul li a:hover { background:#7777CC;
color:#FFF; }
これを試すことをお勧めします a:hover div{display:block} を試してください
a:hover div{display:block} を試すことをお勧めします
機能しません。 。
js を使用して制御します
hover=mouseover/mouseout イベントの組み合わせ
私は JS を使用しないようにしています
投稿者の返信を引用します:
HTML コード
6c04bd5ca3fcae76e30b72ad730ca86d
ff6d136ddc5fdfeffaf53ff6ee95f185
3797f0cb127f1b738660222ae213b962|bed06894275b65c1ab86501b08a632eb 5ff5b82c7d63ca4a4f53f58c49f11459/a>bed06894275b65c1ab86501b08a632eb ;
…
#menu li a:hover {
color:#FFF;
…
表示に影響を与えるものは次のとおりです:
#menu ul li a.rd:hover #submenu{ /*更正一下，发帖中把#submenu写成.submenu了*/ visibility:visible;} 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。