Question

嗨我的网站上有一个导航栏。它的显示内联。目前，导航栏由字形组成，在它们旁边是文本中的“描述”。（用于“后退”或“设置”）我喜欢只有glyphicons，当鼠标超过一个时，应该有一个覆盖（略大于glyphicon的大小），略微着色并带有文字。我怎样才能做到这一点？我已经在线尝试了多个教程，但它们不能用于字形的内联顺序...

#admin_menu .glyphicon                                  { margin: 0px 10px 0px 0px; font-size: 25px;}
#admin_menu                                             { text-align: left; list-style-type: none; margin: 30px 0px 30px 0px; padding: 0px; }
#admin_menu li                                          { display: inline; margin: 0px 0px 0px 0px; padding: 0px; }
#admin_menu li a                                        { background-repeat: no-repeat; padding: 0px 15px 0px 0px; }

<ul id="admin_menu">
        <li><a href="#"><span class="glyphicon glyphicon-circle-arrow-left"></span>  <span> text </span> </a></li>
        <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> <span> text </span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-edit"></span> <span> text </span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> <span> text </span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-plane"></span> <span> text </span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-stats"></span> <span> text </span></a></li>
    </ul>

Answer 1

我有这样的事情：https://jsfiddle.net/d04pLr6q/

这可能不是你想要实现的，不确定;）

   #admin_menu .glyphicon{
    position: absolute;
    font-size: 24px;
    left: 50%;
    margin-left: -12px;
    top: 8px;
    }
    #admin_menu { text-align: left; list-style-type: none; margin: 30px 0px 30px 0px; padding: 0px; }
    #admin_menu li{ 
    display: inline-block; 
    margin: 0px 10px 0px 0px; 
    padding: 0px;
    }
    #admin_menu li a { 
    display:block;
    position: relative;
    height:40px;
    width: 60px;
    padding: 0 10px;
    font-size:16px;
    padding-top:12px;
    text-decoration:none;
     }
     #admin_menu .description{
       color:transparent;
       position: absolute;
       width: 100%;
       height:100%;
       top: 0;
       left:0;
       text-align: center;
       line-height: 40px;
       display: block;
       transition: all 0.3s;
     }
    #admin_menu li a:hover .description{
      color: white;
      background-color: rgba(51, 122, 183, 0.75);
    }

Answer 2

我认为这就像你追求的那样：

＆＃13;

* {
  box-sizing: border-box;
}
#admin_menu .glyphicon {
  font-size: 25px;
  padding: 0 15px
}
#admin_menu {
  text-align: center;
  list-style-type: none;
  margin: 30px;
  padding: 0px;
}
#admin_menu li {
  display: inline-block;
  position: relative;
}
#admin_menu li a {
  display: block;
  text-align: center;
}
#admin_menu li a span:nth-child(2) {
  font-weight: bold;
  position: absolute;
  color: red;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .35s ease;
}
#admin_menu li a:hover .glyphicon {
  opacity: 0.2;
  transition: opacity .35s ease;
}
#admin_menu li a:hover span:nth-child(2) {
  opacity: 1
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul id="admin_menu">
  <li><a href="#"><span class="glyphicon glyphicon-circle-arrow-left"></span>  <span> text </span> </a>
  </li>
  <li><a href="#"><span class="glyphicon glyphicon-info-sign"></span> <span> text </span></a>
  </li>
  <li><a href="#"><span class="glyphicon glyphicon-edit"></span> <span> text </span></a>
  </li>
  <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> <span> text </span></a>
  </li>
  <li><a href="#"><span class="glyphicon glyphicon-plane"></span> <span> text </span></a>
  </li>
  <li><a href="#"><span class="glyphicon glyphicon-stats"></span> <span> text </span></a>
  </li>
</ul>

＆＃13;

悬停时叠加在字形上

2 个答案: