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

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

WBOY
WBOYOriginal
2016-06-21 08:59:192610Durchsuche

<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>

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这一句,否则,下拉菜单在遇到导航或其它元素时,可能会闪烁或意外隐藏等.

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn