Maison > interface Web > tutoriel HTML > le corps du texte

css hover: display:block;伪类在下拉菜单中的应用需要注意z-index的使用_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 08:59:19
original
2608 Les gens l'ont consulté

<div class="userinfo2 pr">    <div class="ib">        <a href="<?php echo $cfg_memberurl; ?>/index.php"><img  class="radius-circle" src="<?php echo $facepic;? alt="css hover: display:block;伪类在下拉菜单中的应用需要注意z-index的使用_html/css_WEB-ITnose" >" width="42"    style="max-width:90%" /></a>    </div>  <div class="welcome"><strong><?php echo $cfg_ml->M_UserName; ?></strong></div>        <div class="mylink2 pa top40 left0 ">        <ul>  <li><a href="<?php echo $cfg_memberurl; ?>/index.php">会员中心</a></li>  <li><a href="<?php echo $myurl;?>">我的空间</a></li>              <li><a href="<?php echo $cfg_memberurl; ?>/guestbook_admin.php">我的留言</a></li>            <li><a href="<?php echo $cfg_memberurl; ?>/mystow.php">我的收藏</a></li>            <li><a href="<?php echo $cfg_memberurl; ?>/article_add.php">发表文章</a></li>            <li><a href="<?php echo $cfg_memberurl; ?>/myfriend.php">好友管理</a></li>            <li><a href="<?php echo $cfg_memberurl; ?>/visit-history.php">访客记录</a></li>            <li><a href="<?php echo $cfg_memberurl; ?>/search.php">查找好友</a></li>   <li> <a href="<?php echo $cfg_memberurl; ?>/index_do.php?fmdo=login&dopost=exit">退出登录</a> </li>        </ul>    </div></div>
Copier après la connexion

css:

.pr{position:relative;}
.pa{position:absolute;}

.userinfo2 .mylink2{z-index:1;display:none;width:80px;background:#fff;}

.userinfo2:hover .mylink2{display:block;}

以上用法,注意增加z-index这一句,否则,下拉菜单在遇到导航或其它元素时,可能会闪烁或意外隐藏等.

 

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal